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:
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!