Solved

Javascript : Display Image on Mouseover

Posted on 2008-06-23
4
7,899 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

696 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