Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Image changing on hover, not working on all entities


Theis_Aarlund
Go to solution Solved by rwp,

Question

Site URL: https://www.davai.squarespace.com

Hi all

I am having some issues with a HTML code, that is supposed to change a image to another when hovered above.

To access  the page, you might have to use the password "davai"

I have tried multiple solutions, but finally found one that actually worked (on one of the entities...)

You can find it in the second section under "Kompetencer". As you can see, it works on "adgangsudstyr" when you hover the mouse above the image, but it does not work on the wind turbine over "Vindmølleservice" or "Overfladebehandling"

The code i have gone for is:

<center>
<img src="URL to still image” 

onmouseover="this.src=’GIF image to replace still image" 

onmouseout="this.src=’URL to still image">
</center>

When the URL is added, it looks like this (this is the one added to the page)

<center>
<img src="https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600854461689-UHACZYWZUG5CQPHJJLWV/icon-wind-turbine-service.png?content-type=image%2Fpng” 

onmouseover="this.src=’https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600868753305-7LONEER0YHGEWO5QEBPT/Wind-turbine.gif?content-type=image%2Fgif’" 

onmouseout="this.src=’https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600854461689-UHACZYWZUG5CQPHJJLWV/icon-wind-turbine-service.png?content-type=image%2Fpng’">
</center>

You should be able to access the images through the links.

 

Feel free to come up with alternate solutions, although i have tried out a few so far...

Link to post
  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Your CSS is incorrect. You are hiding the div, not the animated image. .Img2 { display: none; } .ImgSwap:hover .Img1 { display: none; } .ImgSwap:hover .Img2 { display: inherit; }  

7 answers to this question

Recommended Posts

  • 1

This is easier to do with CSS, use 2 image tags with different classes inside a div.

<div class="imgSwap">
  <img class="img1" src="">
  <img class="img2" src="">
</div>
.img2 {
  display: none;
}

.imgSwap:hover .img1 {
  display: none;
}

.imgSwap:hover .img2 {
  display: inherit;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 1

Your CSS is incorrect. You are hiding the div, not the animated image.

.Img2 {
  display: none;
}

.ImgSwap:hover .Img1 {
  display: none;
}

.ImgSwap:hover .Img2 {
  display: inherit;
}

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0
8 minutes ago, rwp said:

.img2 { display: none; } .imgSwap:hover .img1 { display: none; } .imgSwap:hover .img2 { display: inherit; }

I've just tried it out

it seems that the first bit of CSS, just hides the image completely, before i can see if it changes on hover, please tell if i am wrong

 

Link to post
  • 0

It hides the moving image, then on hover it hides the static one and shows the moving one.

You also don't need a class for each image, they can all use the same class names, because they are changed by hovering, it know which one you are working with.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

Well, clearly something is wrong with me, or the page.

i added this code:

HTML:

<div class="ImgSwap">
  <img class="Img1" src="https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600854461689-UHACZYWZUG5CQPHJJLWV/icon-wind-turbine-service.png?content-type=image%2Fpng">
  <img class="Img2" src="https://images.squarespace-cdn.com/content/5f6873716e3d0466b9953dd9/1600868753305-7LONEER0YHGEWO5QEBPT/Wind-turbine.gif?content-type=image%2Fgif">
</div>

CSS:

.ImgSwap {
  display: none;
}

.ImgSwap:hover .Img1 {
  display: none;
}

.ImgSwap:hover .Img2 {
  display: inherit;
}

It still just shows nothing, not one nor the other

Link to post
  • 0
On 9/24/2020 at 1:22 PM, Theis_Aarlund said:

Well, clearly something is wrong with me, or the page.

i added this code:

Have you solved it yet?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...