Solved

Javascript : Display Image on Mouseover

Posted on 2008-06-23
4
7,863 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 how to dynamically set the form action using jQuery.

776 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