 turn on image when onclick fired, javascript |
  |
| Navarone |
 Oct 5 2007, 07:19 AM
Post
#1
|
|
Member  Group: Members Posts: 42 Joined: 20-April 07 Member No.: 2,576  |
I need some help with my javascript code.
First when I click on my thumbnail I need the thumbnail to be in it's "on" state (rollovers state) and the bigImage to load. I have the bigImaging loading onclick but I can't figure out how to get them both to work. I javascript controlling the rollovers and a function to load the bigImage. Secondly, on the left and right of the bigImage there are arrows, when you click on these arrrows they act like a next and back button, navigating through the gallery. I could solve my problem by making seperate html pages for each image but I was hoping I could find a single page solution. Perhaps multiple pages are the best solution. http://dev-rockwood.virtualhorizons.com/exterior_gallery.htm CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML lang="en"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <LINK REL="STYLESHEET" TYPE="text/css" HREF="/includes/stylesheet.css"> <script type="text/javascript"> //<!-- menu script var ns4 = (document.layers); var ie = (document.all); var ns6 = (!document.all && document.getElementById); if (document.images) { // menu image1on = new Image(); image1on.src = "/images/gallery/exterior/image1_on.jpg"; image2on = new Image(); image2on.src = "/images/gallery/exterior/image2_on.jpg"; image3on = new Image(); image3on.src = "/images/gallery/exterior/image3_on.jpg"; image4on = new Image(); image4on.src = "/images/gallery/exterior/image4_on.jpg"; image5on = new Image(); image5on.src = "/images/gallery/exterior/image5_on.jpg"; image6on = new Image(); image6on.src = "/images/gallery/exterior/image6_on.jpg"; image7on = new Image(); image7on.src = "/images/gallery/exterior/image7_on.jpg"; image8on = new Image(); image8on.src = "/images/gallery/exterior/image8_on.jpg"; image9on = new Image(); image9on.src = "/images/gallery/exterior/image9_on.jpg"; image10on = new Image(); image10on.src = "/images/gallery/exterior/image10_on.jpg"; image11on = new Image(); image11on.src = "/images/gallery/exterior/image11_on.jpg"; image12on = new Image(); image12on.src = "/images/gallery/exterior/image12_on.jpg"; image13on = new Image(); image13on.src = "/images/gallery/exterior/image13_on.jpg"; image14on = new Image(); image14on.src = "/images/gallery/exterior/image14_on.jpg"; image15on = new Image(); image15on.src = "/images/gallery/exterior/image15_on.jpg"; image1off = new Image(); image1off.src = "/images/gallery/exterior/image1_off.jpg"; image2off = new Image(); image2off.src = "/images/gallery/exterior/image2_off.jpg"; image3off = new Image(); image3off.src = "/images/gallery/exterior/image3_off.jpg"; image4off = new Image(); image4off.src = "/images/gallery/exterior/image4_off.jpg"; image5off = new Image(); image5off.src = "/images/gallery/exterior/image5_off.jpg"; image6off = new Image(); image6off.src = "/images/gallery/exterior/image6_off.jpg"; image7off = new Image(); image7off.src = "/images/gallery/exterior/image7_off.jpg"; image8off = new Image(); image8off.src = "/images/gallery/exterior/image8_off.jpg"; image9off = new Image(); image9off.src = "/images/gallery/exterior/image9_off.jpg"; image10off = new Image(); image10off.src = "/images/gallery/exterior/image10_off.jpg"; image11off = new Image(); image11off.src = "/images/gallery/exterior/image11_off.jpg"; image12off = new Image(); image12off.src = "/images/gallery/exterior/image12_off.jpg"; image13off = new Image(); image13off.src = "/images/gallery/exterior/image13_off.jpg"; image14off = new Image(); image14off.src = "/images/gallery/exterior/image14_off.jpg"; image15off = new Image(); image15off.src = "/images/gallery/exterior/image15_off.jpg"; } function turnOn(imageName) { if (document.images) { document[imageName].src = eval(imageName + "on.src"); } } function turnOff(imageName) { if (document.images) { document[imageName].src = eval(imageName + "off.src"); } } // turn on big photos function bigImage(imageName) { if (imageName=="image1") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image1.jpg"; } if (imageName=="image2") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image2.jpg"; } if (imageName=="image3") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image3.jpg"; } if (imageName=="image4") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image4.jpg"; } if (imageName=="image5") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image5.jpg"; } if (imageName=="image6") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image6.jpg"; } if (imageName=="image7") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image7.jpg"; } if (imageName=="image8") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image8.jpg"; } if (imageName=="image9") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image9.jpg"; } if (imageName=="image10") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image10.jpg"; } if (imageName=="image11") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image11.jpg"; } if (imageName=="image12") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image12.jpg"; } if (imageName=="image13") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image13.jpg"; } if (imageName=="image14") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image14.jpg"; } if (imageName=="image15") { document.getElementById('photo').src = "images/gallery/exterior/big_images/image15.jpg"; } } </SCRIPT> </head> <body> <div class="page"> <div class="main_bg"></div> <div class="main_logo"><a href="default.htm" class="home_link"></a></div> <div class="top_menu_container"> <a href="about.htm" class="tmenu1"></a> <a href="exterior_gallery.htm" id="tmenu2_selected"></a> <a href="exterior.htm" class="tmenu3"></a> <a href="interior.htm" class="tmenu4"></a> <a href="fire_doors.htm" class="tmenu5"></a> <a href="millwork.htm" class="tmenu6"></a> </div> <div class="gallery_menu_container"> <a href="#" id="gmenu1_selected"></a> <a href="#" class="gmenu2"></a> <a href="#" class="gmenu3"></a> <a href="#" class="gmenu4"></a> </div> <div class="exterior_gallery_header"> <a href="#" class="download"></a> </div> <div class="gallery_container"> <a href="#" class="back_arrow"></a> <a href="#" class="next_arrow"></a> <div class="gallery_photo"> <img src="images/gallery/exterior/big_images/image1.jpg" id="photo"> </div> <div class="gallery"> <table cellspacing="0" cellpadding="0" border="0" width="208"> <tr> <td valign="top"><a href="#" id="isOn1" onclick="java script:bigImage('image1')" onMouseOver="turnOn('image1')" onMouseOut="turnOff('image1')"><img name="image1" src="images/gallery/exterior/image1_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top" width="8"></td> <td valign="top"><a href="#" id="isOn6" onclick="java script:bigImage('image6')" onMouseOver="turnOn('image6')" onMouseOut="turnOff('image6')"><img name="image6" src="images/gallery/exterior/image6_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top" width="8"></td> <td valign="top"><a href="#" id="isOn11" onclick="java script:bigImage('image11')" onMouseOver="turnOn('image11')" onMouseOut="turnOff('image11')"><img name="image11"1 src="images/gallery/exterior/image11_off.jpg" width="64" height="63" border="0" alt=""></a></td> </tr> <tr> <td valign="top" colspan="5" height="9"></td> </tr> <tr> <td valign="top"><a href="#" id="isOn2" onclick="java script:bigImage('image2')" onMouseOver="turnOn('image2')" onMouseOut="turnOff('image2')"><img name="image2" src="images/gallery/exterior/image2_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn7" onclick="java script:bigImage('image7')" onMouseOver="turnOn('image7')" onMouseOut="turnOff('image7')"><img name="image7" src="images/gallery/exterior/image7_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn12" onclick="java script:bigImage('image12')" onMouseOver="turnOn('image12')" onMouseOut="turnOff('image12')"><img name="image12" src="images/gallery/exterior/image12_off.jpg" width="64" height="63" border="0" alt=""></a></td> </tr> <tr> <td valign="top" colspan="5" height="9"></td> </tr> <tr> <td valign="top"><a href="#" id="isOn3" onclick="java script:bigImage('image3')" onMouseOver="turnOn('image3')" onMouseOut="turnOff('image3')"><img name="image3" src="images/gallery/exterior/image3_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn8" onclick="java script:bigImage('image8')" onMouseOver="turnOn('image8')" onMouseOut="turnOff('image8')"><img name="image8" src="images/gallery/exterior/image8_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn13" onclick="java script:bigImage('image13')" onMouseOver="turnOn('image13')" onMouseOut="turnOff('image13')"><img name="image13" src="images/gallery/exterior/image13_off.jpg" width="64" height="63" border="0" alt=""></a></td> </tr> <tr> <td valign="top" colspan="5" height="9"></td> </tr> <tr> <td valign="top"><a href="#" id="isOn4" onclick="java script:bigImage('image4')" onMouseOver="turnOn('image4')" onMouseOut="turnOff('image4')"><img name="image4" src="images/gallery/exterior/image4_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn9" onclick="java script:bigImage('image9')" onMouseOver="turnOn('image9')" onMouseOut="turnOff('image9')"><img name="image9" src="images/gallery/exterior/image9_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn14" onclick="java script:bigImage('image14')" onMouseOver="turnOn('image14')" onMouseOut="turnOff('image14')"><img name="image14" src="images/gallery/exterior/image14_off.jpg" width="64" height="63" border="0" alt=""></a></td> </tr> <tr> <td valign="top" colspan="5" height="9"></td> </tr> <tr> <td valign="top"><a href="#" id="isOn5" onclick="java script:bigImage('image5')" onMouseOver="turnOn('image5')" onMouseOut="turnOff('image5')"><img name="image5" src="images/gallery/exterior/image5_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn10" onclick="java script:bigImage('image10')" onMouseOver="turnOn('image10')" onMouseOut="turnOff('image10')"><img name="image10" src="images/gallery/exterior/image10_off.jpg" width="64" height="63" border="0" alt=""></a></td> <td valign="top"></td> <td valign="top"><a href="#" id="isOn15" onclick="java script:bigImage('image15')" onMouseOver="turnOn('image15')" onMouseOut="turnOff('image15')"><img name="image15" src="images/gallery/exterior/image15_off.jpg" width="64" height="63" border="0" alt=""></a></td> </tr> </table> </div> <div class="bottom_menu_container"> <a href="hardwood.htm" class="menu_item1"></a> <a href="contact.htm" class="menu_item2"></a> </div> <div class="copyright">© 2007 ROCKWOOD DOORS & MILLWORK</div> <div class="sub_nav_loc"> <a href="about.htm" class="sub_nav">About Rockwood</a> | <a href="exterior_gallery.htm" class="sub_nav">Photo Gallery</a> | <a href="exterior.htm" class="sub_nav">Exterior</a> | <a href="interior.htm" class="sub_nav">Interior</a> | <a href="fire_doors.htm" class="sub_nav">Fire Doors</a> | <a href="millwork.htm" class="sub_nav">Millwork/Molding</a> | <a href="hardware.htm" class="sub_nav">Hardware Links</a> | <a href="contact.htm" class="sub_nav">Contact Us</a> </div> </div> </body> </html> |
  |
 
|
| Darin McGrew |
Oct 5 2007, 11:17 AM
Post
#2
|
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
QUOTE(Navarone @ Oct 5 2007, 05:19 AM)  I could solve my problem by making seperate html pages for each image but I was hoping I could find a single page solution. Perhaps multiple pages are the best solution. You can automate the creation of multiple pages, so you don't have to create/maintain them all by hand. Is there any other reason why you're focused on a single page approach? |
|
|
|
|
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 01:38 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC