How to make a div loaded with different images actual links?

deucalion0 · March 19, 2011, 11:08pm

Hey guys, I have a couple of divs as part of my gallery page, I was wondering how I can make the image that is loaded into the div be a link, so it can be clicked on, but a different link for each image. The page I am creating can be found here:

Page One

I want to click the main div on the right when it has been loaded with an image so it opens up the original image source in a new window, I can make images links no problem, but the way the page is coded I’m confused to how to do this in this situation.

Here is the code for the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="description" content="Index page of Top five bands website" />
		<meta name="keywords" content="top, five, metal, bands, pantera, rammstein, in flames, children of bodom, machine head" />
		<meta name="language" content="en"/>
		<meta name="viewport" content="width=480" />
		<title>Page One</title>	
		<link rel="stylesheet" href="style.css" type="text/css" />
		<script type="text/javascript"  src="script.js"></script>
	</head>

	<body> 
	
		<div id="wrapper">
				
			<div id="header2" title="Home page banner graphic" >
				<h1 class="hidden">The  Bands</h1>
			</div>
			
			<div id="jukeboxbar">
				<div id="jukebox">
			<!--[if !IE]>-->	<OBJECT id="Player"type="application/x-ms-wmp"width="300" height="60" >
					
						<PARAM NAME="URL" VALUE="playlist.asx">
						<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
						<PARAM NAME="AutoStart" VALUE="False">
						<PARAM name="uiMode" value="Full">
						<PARAM name="PlayCount" value="9999">
					</OBJECT> <!--<![endif]--> 
					
					
					
						<OBJECT id="Player"type="application/x-ms-wmp"width="300" bgcolor="darkblue" height="60" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
					
						<PARAM NAME="URL" VALUE="playlist.asx">
						<PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
						<PARAM NAME="AutoStart" VALUE="False">
						<PARAM name="uiMode" value="Full">
						<PARAM name="PlayCount" value="9999">
					</OBJECT>
				</div>
			</div>	
		
			<div id="navigation">
				<ul id="nav">
					<li><a href="index.html"><img border="0" title="Home" alt="Home" src="Images/11.jpg" name="b1" onmouseover="mouseOver1()"  onmouseout="mouseOut1()" /></a></li>
					<li><a href="map.html"><img border="0" title="Map" alt="Map" src="Images/33.jpg" name="b3" onmouseover="mouseOver3()" onmouseout="mouseOut3()" /></a></li>
					<li><a href="links.html"><img border="0" title="Links" alt="Links" src="Images/44.jpg" name="b4" onmouseover="mouseOver4()" onmouseout="mouseOut4()" /></a></li>
					<li><a href="join.html"><img border="0" title="Join" alt="Join" src="Images/55.jpg" name="b5" onmouseover="mouseOver5()" onmouseout="mouseOut5()" /></a></li>
				</ul>
			</div>

			<div id="main">
			<br/>
			
			<img src="Images/gallery1.jpg" class="floatRight">	
				<p>The Top Five Metal Bands, Galllery page is where you will see photos of the bands!</p>
						
				<p>Clicking on a band emblem below will open an image of the band members for that band! Hover the mouse over the individual members and you will see the band members name appear under the image!
				If you want more information, click on the band member within the image and a web page will open in a new window taking you to that members web page, where you will find lots of interesting information!</p>
						
				<p>Below the band members image is a set of thumbnails, hover the mouse over one for it to appear in the box next to the thumbnails, or click on it! If you want to see this image bigger, then click on the larger image on the right and it will open in a new window at a higher
				resolution!</p>
			</div>
						
				<div id="maintopfive">	
		
			
					<ul id="nav2">
						<li><a href="Images/pantera.jpg" title="Pantera"  alt="Pantera" onmouseup="HideShow(0);" onclick="showPic(this, '#panteramap');  return false"><img src="Images/pl.jpg" border="0"></a></li>
                        <li><a href="Images/rammstein.jpg"  title="Rammstein"  alt="Rammstein" onmouseup="HideShow(1);" onclick="showPic(this, '#rammsteinmap');  return false"><img src="Images/rl.jpg" border="0"></a></li>
						<li><a href="Images/children of bodom.jpg" title="Children of Bodom" alt="Children of Bodom" onmouseup="HideShow(2);" onclick="showPic(this, '#cobmap'); return false"><img src="Images/cl.jpg" border="0"></a></li>
                        <li><a href="Images/in flames.jpg"  title="In Flames" alt="In Flames" onmouseup="HideShow(3);" onclick="showPic(this, '#flamesmap'); return false"><img src="Images/il.jpg" border="0"></a></li>
                        <li><a href="Images/machine head.jpg"  title="Machine Head"  alt="Machine Head" onmouseup="HideShow(4);" onclick="showPic(this, '#mhmap'); return false"><img src="Images/ml.jpg" border="0"></a></li>
                    </ul>

                    <img id="placeholder" src="Images/pp.png"  width ="640" height ="427" title="Map" usemap="#blank" />
		
				

					<map id ="panteramap" name="panteramap">
					<area shape ="rect" coords ="0,0,140,426"
					onMouseOver="writeText('This is VInnie Paul')"
					href ="http://en.wikipedia.org/wiki/Vinnie_Paul" target ="_blank" alt="Vinnie Paul" />

					<area shape ="rect" coords ="141,0,277,426"
					onMouseOver="writeText('This is Phil Anselmo')"
					href ="http://www.philanselmo.com/" target ="_blank" alt="Phil Anselmo" />

					<area shape ="rect" coords ="278,0,433,426"
					onMouseOver="writeText('This Rex Brown')"
					href ="http://en.wikipedia.org/wiki/Rex_Brown" target ="_blank" alt="Rex Brown" />
					
					<area shape ="rect" coords ="434,0,630,426"
					onMouseOver="writeText('This is Dimebag Darrel')"
					href ="http://en.wikipedia.org/wiki/Dimebag_Darrell" target ="_blank" alt="Dimebag Darrel" />
					</map> 

					<p id="desc"></p>
					
					
					<map id ="rammsteinmap" name="rammsteinmap">
					<area shape ="rect" coords ="0,0,110,426"
					onMouseOver="writeText('This is Till Lindemann')"
					href ="http://en.wikipedia.org/wiki/Till_Lindemann" target ="_blank" title="Till Lindemann" alt="Till Lindemann" />

					<area shape ="rect" coords ="111,0,240,426"
					onMouseOver="writeText('This is Richard Kruspe')"
					href ="http://en.wikipedia.org/wiki/Richard_Z._Kruspe" target ="_blank" title="Richard Kruspe" alt="Richard Kruspe" />

					<area shape ="rect" coords ="241,0,330,426"
					onMouseOver="writeText('This is Paul Landers')"
					href ="http://en.wikipedia.org/wiki/Paul_Landers" target ="_blank" Title="Paul Landers" alt="Paul Landers" />
					
					<area shape ="rect" coords ="331,0,444,426"
					onMouseOver="writeText('This is Christoph Schneider')"
					href ="http://en.wikipedia.org/wiki/Christoph_Schneider" target ="_blank" title="Christoph Schneider" alt="Christoph Schneider" />
					
					<area shape ="rect" coords ="445,0,520,426"
					onMouseOver="writeText('This is Oliver Riedel')"
					href ="http://en.wikipedia.org/wiki/Oliver_Riedel" target ="_blank" title="Oliver Riedel" alt="Oliver Riedel" />
					
					<area shape ="rect" coords ="521,0,639,426"
					onMouseOver="writeText('This is Flake')"
					href ="http://en.wikipedia.org/wiki/Christian_Lorenz" target ="_blank" title="flake" alt="Flake" />
					</map> 

					<p id="desc"></p>
					
					<map id ="cobmap" name="cobmap">
					<area shape ="rect" coords ="0,0,146,426"
					onMouseOver="writeText('This is Jaska Raatikainen')"
					href ="http://en.wikipedia.org/wiki/Jaska_Raatikainen" target ="_blank" title="Jaska Raatikainen" alt="Jaska Raatikainen" />

					<area shape ="rect" coords ="147,0,230,426"
					onMouseOver="writeText('This is Janne Wirman')"
					href ="http://en.wikipedia.org/wiki/Janne_Wirman" target ="_blank" title="Janne Wirman" alt="Janne Wirman" />

					<area shape ="rect" coords ="231,0,360,426"
					onMouseOver="writeText('This is Alexi Laiho')"
					href ="http://en.wikipedia.org/wiki/Alexi_Laiho" target ="_blank" title="Alexi Laiho" alt="Alexi Laiho" />
					
					<area shape ="rect" coords ="361,0,460,426"
					onMouseOver="writeText('This is Henkka Seppälä ')"
					href ="http://en.wikipedia.org/wiki/Henkka_Sepp%C3%A4l%C3%A4" target ="_blank" title="Henkka Seppälä " alt="Henkka Seppälä " />
					
					<area shape ="rect" coords ="461,0,639,426"
					onMouseOver="writeText('This is Roope Latvala')"
					href ="http://en.wikipedia.org/wiki/Roope_Latvala" target ="_blank" title="Roope Latvala" alt="Roope Latvala" />
					</map> 

					<p id="desc"></p>
					
					<map id ="flamesmap" name="flamesmap">
					<area shape ="rect" coords ="0,0,110,426"
					onMouseOver="writeText('This is Peter Iwers')"
					href ="http://en.wikipedia.org/wiki/Peter_Iwers" target ="_blank" title="Peter Iwers" alt="Peter Iwers" />

					<area shape ="rect" coords ="111,0,265,426"
					onMouseOver="writeText('This is Daniel Svensson')"
					href ="http://en.wikipedia.org/wiki/Daniel_Svensson" target ="_blank" title="Daniel Svensson" alt="Daniel Svensson" />

					<area shape ="rect" coords ="266,0,373,426"
					onMouseOver="writeText('This is Anders Fridén')"
					href ="http://en.wikipedia.org/wiki/Anders_Frid%C3%A9n" target ="_blank" title="Anders Fridén" alt="Anders Fridén" />
					
					<area shape ="rect" coords ="374,0,500,426"
					onMouseOver="writeText('This is Björn Gelotte')"
					href ="http://en.wikipedia.org/wiki/Bj%C3%B6rn_Gelotte" target ="_blank" title="Björn Gelotte" alt="Björn Gelotte" />
					
					<area shape ="rect" coords ="501,0,639,426"
					onMouseOver="writeText('This is Jesper Strömblad')"
					href ="http://en.wikipedia.org/wiki/Jesper_Str%C3%B6mblad" target ="_blank" title="Jesper Strömblad" alt="Jesper Strömblad" />
					</map> 

					<p id="desc"></p>
					
					<map id ="mhmap" name="mhmap">
					<area shape ="rect" coords ="0,0,192,426"
					onMouseOver="writeText('This is Adam Duce')"
					href ="http://en.wikipedia.org/wiki/Adam_Duce" target ="_blank" title="Adam Duce" alt="Adam Duce" />

					<area shape ="rect" coords ="193,0,373,426"
					onMouseOver="writeText('This is Robb Flynn')"
					href ="http://en.wikipedia.org/wiki/Robert_Flynn" target ="_blank" title="Robb Flynn" alt="Robb Flynn" />

					<area shape ="rect" coords ="374,0,472,426"
					onMouseOver="writeText('This is Dave McClain')"
					href ="http://en.wikipedia.org/wiki/Dave_McClain_%28drummer%29" target ="_blank" title="Dave McClain" alt="Dave McClain" />
					
					<area shape ="rect" coords ="473,0,639,426"
					onMouseOver="writeText('This is Phil Demmel')"
					href ="http://en.wikipedia.org/wiki/Phil_Demmel_%28musician%29" target ="_blank" title="Phil Demmel" alt="Phil Demmel" />
					</map> 

					<p id="desc"></p>

				
				
				</div>
				<div id="maingallery">	
				
				<div id="mainleft" class="divstyle">				
					<a href="Images/plarge1.jpg" width="100" height="100" alt="Pantera1" title="Pantera1" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf1.jpg" border="0"></a>
					<a href="Images/plarge2.jpg" width="100" height="100" alt="Pantera2" title="Pantera2" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf2.jpg" border="0"></a>
					<a href="Images/plarge3.jpg" width="100" height="100" alt="Pantera3" title="Pantera3" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf3.jpg" border="0"></a>
					<a href="Images/plarge4.jpg" width="100" height="100" alt="Pantera4" title="Pantera4" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf4.jpg" border="0"></a>
					<a href="Images/plarge5.jpg" width="100" height="100" alt="Pantera5" title="Pantera5" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf5.jpg" border="0"></a>
					<a href="Images/plarge6.jpg" width="100" height="100" alt="Pantera6" title="Pantera6" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf6.jpg" border="0"></a>
					<a href="Images/plarge7.jpg" width="100" height="100" alt="Pantera7" title="Pantera7" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf7.jpg" border="0"></a>
					<a href="Images/plarge8.jpg" width="100" height="100" alt="Pantera8" title="Pantera8" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf8.jpg" border="0"></a>
					<a href="Images/plarge9.jpg" width="100" height="100" alt="Pantera9" title="Pantera9" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ptf9.jpg" border="0"></a>
				</div>
				
				<div id="mainleft" class="divstyle">				
					<a href="Images/rlarge1.jpg" width="100" height="100" alt="Rammstein1" title="Rammstein1" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf1.jpg" border="0"></a>
					<a href="Images/rlarge2.jpg" width="100" height="100" alt="Rammstein2" title="Rammstein2" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf2.jpg" border="0"></a>
					<a href="Images/rlarge3.jpg" width="100" height="100" alt="Rammstein3" title="Rammstein3" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf3.jpg" border="0"></a>
					<a href="Images/rlarge4.jpg" width="100" height="100" alt="Rammstein4" title="Rammstein4" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf4.jpg" border="0"></a>
					<a href="Images/rlarge5.jpg" width="100" height="100" alt="Rammstein5" title="Rammstein5" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf5.jpg" border="0"></a>
					<a href="Images/rlarge6.jpg" width="100" height="100" alt="Rammstein6" title="Rammstein6" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf6.jpg" border="0"></a>
					<a href="Images/rlarge7.jpg" width="100" height="100" alt="Rammstein7" title="Rammstein7" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf7.jpg" border="0"></a>
					<a href="Images/rlarge8.jpg" width="100" height="100" alt="Rammstein8" title="Rammstein8" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf8.jpg" border="0"></a>
					<a href="Images/rlarge9.jpg" width="100" height="100" alt="Rammstein9" title="Rammstein9" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/rtf9.jpg" border="0"></a>
				</div>
				
				<div id="mainleft" class="divstyle">				
					<a href="Images/clarge1.jpg" width="100" height="100" alt="Children of Bodom1" title="Children of Bodom1" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf1.jpg" border="0"></a>
					<a href="Images/clarge2.jpg" width="100" height="100" alt="Children of Bodom2" title="Children of Bodom2" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf2.jpg" border="0"></a>
					<a href="Images/clarge3.jpg" width="100" height="100" alt="Children of Bodom3" title="Children of Bodom3" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf3.jpg" border="0"></a>
					<a href="Images/clarge4.jpg" width="100" height="100" alt="Children of Bodom4" title="Children of Bodom4" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf4.jpg" border="0"></a>
					<a href="Images/clarge5.jpg" width="100" height="100" alt="Children of Bodom5" title="Children of Bodom5" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf5.jpg" border="0"></a>
					<a href="Images/clarge6.jpg" width="100" height="100" alt="Children of Bodom6" title="Children of Bodom6" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf6.jpg" border="0"></a>
					<a href="Images/clarge7.jpg" width="100" height="100" alt="Children of Bodom7" title="Children of Bodom7" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf7.jpg" border="0"></a>
					<a href="Images/clarge8.jpg" width="100" height="100" alt="Children of Bodom8" title="Children of Bodom8" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf8.jpg" border="0"></a>
					<a href="Images/clarge9.jpg" width="100" height="100" alt="Children of Bodom9" title="Children of Bodom9" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/ctf9.jpg" border="0"></a>
				</div>
				
				<div id="mainleft" class="divstyle">				
					<a href="Images/ilarge1.jpg" width="100" height="100" alt="In Flames1" title="In Flames1" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf1.jpg" border="0"></a>
					<a href="Images/ilarge2.jpg" width="100" height="100" alt="In Flames2" title="In Flames2" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf2.jpg" border="0"></a>
					<a href="Images/ilarge3.jpg" width="100" height="100" alt="In Flames3" title="In Flames3" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf3.jpg" border="0"></a>
					<a href="Images/ilarge4.jpg" width="100" height="100" alt="In Flames4" title="In Flames4" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf4.jpg" border="0"></a>
					<a href="Images/ilarge5.jpg" width="100" height="100" alt="In Flames5" title="In Flames5" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf5.jpg" border="0"></a>
					<a href="Images/ilarge6.jpg" width="100" height="100" alt="In Flames6" title="In Flames6" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf6.jpg" border="0"></a>
					<a href="Images/ilarge7.jpg" width="100" height="100" alt="In Flames7" title="In Flames7" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf7.jpg" border="0"></a>
					<a href="Images/ilarge8.jpg" width="100" height="100" alt="In Flames8" title="In Flames8" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf8.jpg" border="0"></a>
					<a href="Images/ilarge9.jpg" width="100" height="100" alt="In Flames9" title="In Flames9" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/itf9.jpg" border="0"></a>
				</div>
				
				<div id="mainleft" class="divstyle">				
					<a href="Images/mlarge1.jpg" width="100" height="100" alt="Machine Head1" title="Machine Head1" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf1.jpg" border="0"></a>
					<a href="Images/mlarge2.jpg" width="100" height="100" alt="Machine Head2" title="Machine Head2" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf2.jpg" border="0"></a>
					<a href="Images/mlarge3.jpg" width="100" height="100" alt="Machine Head3" title="Machine Head3" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf3.jpg" border="0"></a>
					<a href="Images/mlarge4.jpg" width="100" height="100" alt="Machine Head4" title="Machine Head4" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf4.jpg" border="0"></a>
					<a href="Images/mlarge5.jpg" width="100" height="100" alt="Machine Head5" title="Machine Head5" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf5.jpg" border="0"></a>
					<a href="Images/mlarge6.jpg" width="100" height="100" alt="Machine Head6" title="Machine Head6" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf6.jpg" border="0"></a>
					<a href="Images/mlarge7.jpg" width="100" height="100" alt="Machine Head7" title="Machine Head7" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf7.jpg" border="0"></a>
					<a href="Images/mlarge8.jpg" width="100" height="100" alt="Machine Head8" title="Machine Head8" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf8.jpg" border="0"></a>
					<a href="Images/mlarge9.jpg" width="100" height="100" alt="Machine Head9" title="Machine Head9" onmouseover="showPic2(this); return false" onclick="showPic2(this); return false" /><img src="Images/Thumbs/mtf9.jpg" border="0"></a>
				</div>
				
				<div id="mainright">				
					 <img id="placeholder2" src="Images/pp.png" target ="_blank"  title="im" width ="400" height ="400"  />
				</div>
						
			</div>	

			
				
			<div id="footer">
				<p class="hidden"> Conformance: XHTML 1.0 Strict | Copyright © 2010 R.Leadingham.</p>	
			</div>
			
		</div>
	</body>
</html>

Thanks to anyone that can help me out!

PaulOB · March 20, 2011, 3:58pm

Hi,

This looks looks a javascript question so I’ll move the post to the js forum as my js is rubbish.

If I understand you correctly then you have this placeholder div in your html.


<div id="mainright">				  <img id="placeholder2" src="Images/pp.png" target ="_blank"  title="im" width ="400" height ="400"  /> </div>

When a thumbnail is hovered the src of that place holder image is replaced with the correct image.

Therefore I would assume that you need to add a placeholder anchor to the placeholder also.

e.g. Something like this:


<div id="mainright"> [B]<a id="imghref" href="#"[/B]><img id="placeholder2" src="Images/pp.png" target ="_blank"  title="im" width ="400" height ="400"  />[B]</a> [/B]</div>

Now when you swap the image you should also swap the href in the anchor placeholder to point to the correct image.

e.g. Change your showPic2 function to something similar:


function showPic2(title)
{
        var mainImg = document.getElementById('placeholder2');
        mainImg.src = title.href;
        var mainHref = document.getElementById('imghref');
        mainHref.href = title.href;
             
}

However if that works it will be a miracle so wait until someone who knows what they are talking about comes along Also I’m not sure why you want the same image that is already loaded to be loaded in another window anyway.

You really need something a lot cleaner and unobtrusive than all those inline onclick handlers which make the html a complete mess.

deucalion0 · March 20, 2011, 4:46pm

Hi Paul O B thanks a lot for your replay and suggestion!

I will go and try that now. Can I just say that I know the HTML is a mess, but you have to understand, for a beginner to build a page like that using help and information here and there piecing it all together, is the outcome of my code. I know it is not efficient and not professional, but I got the job, almost done so to speak, what I really need is for someone to explain and show me the best way, the proper way to do all this. I get ideas and aim to complete them and it just went from there, I look at the html and think it can be better but I’m just happy I got this far Please though, if you can show me a way to do all this in aneater more efficient way I would be delighted!

As for the image being loaded twice, it is not actually the same image one is 133 x 133 and the other is 400 x 400, so a thumbnail hovered or clicked on shows the larger image in the div next to it. It is basically an image gallery. The more I practice the better my code and ideas will get! Hopefully!

Now to try your suggestion!

Thanks!