Welcome to WebmasterWorld Guest from 3.227.233.6

Forum Moderators: not2easy

Message Too Old, No Replies

Code to display thumbnail mouse over that is SEO friendly

     
9:14 am on Nov 23, 2016 (gmt 0)

New User

10+ Year Member Top Contributors Of The Month

joined:Aug 12, 2009
posts: 4
votes: 0


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.
9:45 am on Nov 23, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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.
1:20 pm on Nov 23, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2662
votes: 793


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>
7:03 pm on Nov 23, 2016 (gmt 0)

New User

10+ Year Member Top Contributors Of The Month

joined:Aug 12, 2009
posts: 4
votes: 0


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 ]
7:15 pm on Nov 23, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2662
votes: 793


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...]