Code to display thumbnail mouse over that is SEO friendly

[froggger]

Hi,

Just wondering if someone can please help. I am trying to find some better code to swap images from mouseover on thumbnails that is SEO friendly and going to display the images better. Not sure what code to use or if javascript of some CSS code is the best way to go.

This is what I have now

html code

<img src="bce/pool-landscaping.jpg" id="showcase" alt="Pool Coping" />


<img src="bce/pool-landscaping-s.jpg" onmouseover="document.getElementById('showcase').src=show1.src" class="showthumb" alt="Pool Landscaping" />
<img src="bce/bluestone-coping-s.jpg" onmouseover="document.getElementById('showcase').src=show2.src" class="showthumb" alt="Bluestone" />
<img src="bce/blue-tiled-pool-s.jpg" onmouseover="document.getElementById('showcase').src=show3.src" class="showthumb" alt="Blue Tiled Pool" />

The above code/page is linked to a .js file that displays the images.

.js file

if (document.images) {
show1 = new Image
show2 = new Image
show3 = new Image
 
show1.src = "tpd/traditional-swimming-pool.jpg"
show2.src = "tpd/formal-pool.jpg"
show3.src = "tpd/alfresco-seating.jpg"
}

The above code also pre loads the photo which makes it better to display. This is also an option I am looking to keep.

If I can some how have the main file name on the html file and not relay on the external .js I believe that will help with the SEO of the page and image.

Thanks in advance.

[keyplyr]

Another option - I use a small php script that creates the thumbnail from the full size image hard-coded on the page, displayed by a colorbox script (like Google or Bing Image.)

Full size image is preloaded & gets indexed.

This does similar (not a mouse-over) to what you're after & is not as complicated as it may sound. If that interests you, you can follow the bio link in my profile, then click the picture to see the page where this is done. Then source the page to get the code.

[NickMNS]

I am not 100% sure what exactly your are trying to achieve but if you want to image to change on mouse-over you can use the :hover pseudo-class. Then you can style the div one way when it is in its normal state and another way when it is in its mouser-over state.

<style>
#some-div{
 background-image: url(/images/img1.jpg);
 height:20px;
 width:20px;
}
#some-div:hover{
 background-image: url(/images/img2.jpg);
 height:200px;
 width:200px;
} 
</style>

[froggger]

Thanks for coming back to me. I am trying to implement the CSS but struggling to get your code above to work.

MAIN IMAGE
<img src="bce/pool-landscaping.jpg" id="some-div" alt="Pool Coping" title="Pool Coping" />

THUMBNAIL IMAGES
<img src="bce/pool-landscaping-s.jpg" />
<img src="bce/bluestone-coping-s.jpg" />
<img src="bce/blue-tiled-pool-s.jpg" />

The main image needs changes when you mouse over the thumbnails. I have attached an image to how it looks.

[space2view.com ]

[NickMNS]

It is difficult to answer you without the html. But this stack exchange thread should provide you with all the info you need.
[stackoverflow.com...]