Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Javascript : Display Image on Mouseover

Posted on 2008-06-23
4
Medium Priority
?
7,927 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 2000 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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to implement server side field validation and display customized error messages to the client.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

581 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