clickable image map [Archive]

bigbjohn

04-18-2003, 12:46 AM

CLICKABLE MAP
HI THERE PLEASE COULD YOU HELP ME ON THIS CLICKABLE MAP AS I HAVE GOT SO FAR ON IT BUT COME TO A STOP ITS ALL BELOW
what i am trying to do is make it so when you click on the small picture image box it takes that small picture to the bigger picture box all on the one page what i am trying to do is have 6 small boxes on the right 2 rows across and three rows down AND HAVE the bigger picture on the left i have seen it many time on the net but just cant master it now . kind regards john or bigbjohn
<HTML>

<HEAD>

<TITLE></TITLE>

</HEAD>

<BODY><A HREF="http:// my server here/"><IMG SRC="bear1.jpg" HEIGHT="282" WIDTH="320" ALT="bear1.jpg *" NAME="bear1.jpg" HSPACE="10" VSPACE="10" ALIGN="LEFT"></a><P ALIGN=RIGHT><A HREF="http://my server here/"><IMG SRC="bear1.jpg" HEIGHT="62" WIDTH="72" ALT="bear1.jpg *" NAME="bear1.jpg" HSPACE="10" VSPACE="10"

<IMG SRC="bear2.jpg"><IMG SRC="bear2.jpg" HEIGHT="62" WIDTH="72" ALT="bear2.jpg *" NAME="bear2.jpg" HSPACE="10" VSPACE="10"

<IMG SRC="bear3.jpg"><IMG SRC="bear3.jpg" HEIGHT="62" WIDTH="72" ALT="bear3.jpg *" NAME="bear3.jpg" HSPACE="10" VSPACE="10"

<IMG SRC="bear4.jpg"><IMG SRC="bear4.jpg" HEIGHT="62" WIDTH="72" ALT="bear4.jpg *" NAME="bear4.jpg" HSPACE="10" VSPACE="10"

<IMG SRC="bear5.jpg"><IMG SRC="bear5.jpg" HEIGHT="62" WIDTH="72" ALT="bear5.jpg *" NAME="bear5.jpg" HSPACE="10" VSPACE="10"

<IMG SRC="bear6.jpg"><IMG SRC="bear6.jpg" HEIGHT="62" WIDTH="72" ALT="bear6.jpg *" NAME="bear6.jpg" HSPACE="10" VSPACE="10"

<IMG SRC="bear7.jpg"><IMG SRC="bear7.jpg" HEIGHT="62" WIDTH="72" ALT="bear7.jpg *" NAME="bear7.jpg" HSPACE="10" VSPACE="10"

<IMG SRC="bear8.jpg"><IMG SRC="bear8.jpg" HEIGHT="62" WIDTH="72" ALT="bear8.jpg *" NAME="bear8.jpg" HSPACE="10" VSPACE="10"

</BODY>

</HTML>

khalidali63

04-18-2003, 08:13 AM

How about adding onclick event calls in the image tags such as
<IMG SRC="bear2.jpg"><IMG SRC="bear2.jpg" HEIGHT="62" WIDTH="72" ALT="bear2.jpg *" NAME="bear2.jpg" HSPACE="10" VSPACE="10" onclick="showFullSize('bear2.jpg')">

And in the javascript code section..

function "showFullSize(imgURL){
/now here you have to decide about where or how you want to show the larger image,if its on the page ata sertain location then create an div tag with id="imgId">
and then add an image element to it

}