Solved

Javascript : Display Image on Mouseover

Posted on 2008-06-23
4
7,869 Views
Last Modified: 2013-11-19
Hello

Could someone tell me how to change the thumbnail images (on the url below) when the thumbnail is hovered over instead of clicked on

http://www.studio10photography.co.uk/gallery.php

Thanks
0
Comment
Question by:kevinb4940
  • 2
  • 2
4 Comments
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 21850901
Here you go:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><base href="http://www.studio10photography.co.uk/gallery.php"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gallery</title>
</head> 
<body>
<table width="400" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
  <tr>
    <td colspan="4"><div align="center"><img src="pix2/image_a.jpg" align="middle" border="0" width="380 height="225" name="large"></div></td>
  </tr>
  <tr> 
    <td colspan="4">&nbsp;</td>
  </tr>
  <tr>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(0)"><img src= width="90 height="80" name="pimage0" border=0></a></div></td>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(1)"><img src= width="90" height="80" name="pimage1" border=0></a></div></td>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(2)"><img src= width="90" height="80" name="pimage2" border=0></a></div></td>
    <td bordercolor="#FFFFFF"><div align="center"><a href="void()" onmouseover="javascript:image_click(3)"><img src= width="90" height="80" name="pimage3" border=0></a></div></td>
  </tr>
  <tr> 
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(4)"><img src= width="90 height="80" name="pimage4" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(5)"><img src= width="90 height="80" name="pimage5" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(6)"><img src= width="90 height="80" name="pimage6" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(7)"><img src= width="90 height="80" name="pimage7" border=0></a></div></td>
  </tr>
  <tr>
     <td><div align="center"><a href="void()" onmouseover="javascript:image_click(8)"><img src= width="90 height="80" name="pimage8" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(9)"><img src= width="90 height="80" name="pimage9" border=0></a></div></td>
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(10)"><img src= width="90 height="80" name="pimage10" border=0></a></div></td> 
    <td><div align="center"><a href="void()" onmouseover="javascript:image_click(11)"><img src= width="90 height="80" name="pimage11" border=0></a></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table> 
<!--- THESE BLOCKS OF CODE CONTROL HOW THE IMAGES ARE DISPLAYED---> 
<script language="JavaScript">
<!--
//thumbnail script
image0 =new Image();
image1 =new Image();
image2 =new Image();
image3 =new Image();
image4 =new Image();
image5 =new Image();
image6 =new Image();
image7 =new Image();
image8 =new Image();
image9 =new Image();
image10 =new Image();
image11 =new Image(); 
// This defines the source of the display image 
image0.src ="pix2/image_a.jpg"
image1.src ="pix2/image_b.jpg"
image2.src ="pix2/image_c.jpg"
image3.src ="pix2/image_d.jpg"
image4.src ="pix2/image_e.jpg"
image5.src ="pix2/image_f.jpg"
image6.src ="pix2/image_g.jpg"
image7.src ="pix2/image_h.jpg"
image8.src ="pix2/image_i.jpg"
image9.src ="pix2/image_j.jpg"
image10.src ="pix2/image_k.jpg"
image11.src ="pix2/image_l.jpg" 
// This defines the source of the preview image 
document.images['pimage0'].src=image0.src;
document.images['pimage1'].src=image1.src;
document.images['pimage2'].src=image2.src;
document.images['pimage3'].src=image3.src;
document.images['pimage4'].src=image4.src;
document.images['pimage5'].src=image5.src;
document.images['pimage6'].src=image6.src;
document.images['pimage7'].src=image7.src;
document.images['pimage8'].src=image8.src;
document.images['pimage9'].src=image9.src;
document.images['pimage10'].src=image10.src;
document.images['pimage11'].src=image11.src; 
// This defines what to do when an image is clicked on 
function image_click(clicks)
{
if(clicks==0){document.images['large'].src=image0.src;}
if(clicks==1){document.images['large'].src=image1.src;}
if(clicks==2){document.images['large'].src=image2.src;}
if(clicks==3){document.images['large'].src=image3.src;}
if(clicks==4){document.images['large'].src=image4.src;}
if(clicks==5){document.images['large'].src=image5.src;}
if(clicks==6){document.images['large'].src=image6.src;}
if(clicks==7){document.images['large'].src=image7.src;}
if(clicks==8){document.images['large'].src=image8.src;}
if(clicks==9){document.images['large'].src=image9.src;}
if(clicks==10){document.images['large'].src=image10.src;}
if(clicks==11){document.images['large'].src=image11.src;}
}
// --></script>  
</body>
</html>

Open in new window

0
 

Author Comment

by:kevinb4940
ID: 21850937
Thanks  hielo
0
 
LVL 82

Expert Comment

by:hielo
ID: 21850941
You are welcome!
0
 

Author Closing Comment

by:kevinb4940
ID: 31469969
Very Pleased!!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Show tab when enter div and change underline color 3 62
Access RV042 GUI / Browser Issues 25 48
Google Analytics setup 5 50
Start Auto-download of File when page loads? 1 21
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question