Log in

View Full Version : make the (other) mouseover display image id a clickable link


artisartsy
08-20-2010, 09:01 PM
Hello, I'm new to html and javascript.

I have made a thumbnail image gallery. Thumbs are on one side while display image is in the center of page.

I've created a mouseover gallery, without a 'mouseout' feature so display image stays until mouse hovers over another thumb.

I'd like to make my central images click to a link. there are 8 images, so I'll have 8 links. the thumbnail images already link to the desired page.

Does anyone know how to do this?

check out the page:
http://eisenfeld.com/portfolio-pages/Port I/p-dreaming-thumbs.shtml
(yes, there is a space between Port and I)
--
Candice
connor4312
08-21-2010, 05:30 AM
Please post the code for the gallery :)
artisartsy
08-21-2010, 05:21 PM
Hello, I am new here and to html. I have a mouseover thumbnail image gallery without the mouseout attribute. How do I make the display image a clickable link?
here is code below with irrelevant stuff deleted::::::
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Candice Eisenfeld Fine Art - Portfolio I</title>
<script language="JavaScript" src="/Scripts/sitewide-functions.js" type="text/javascript">
</script>
<link href="/style_sheets/default.css" rel="stylesheet" type="text/css" />
<script langauge="JavaScript" src="/Scripts/mouseover-gallery.js"></script>
<script language="JavaScript">

var cap = new Array();

cap[1] = '<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="281" height="54"><div align="left" class="style73"> <span class="style74">Forest Ridge Road I</span><br>' +
'acrylic on birch panel<br>' +
'48 x 48in</div></td> '+
'<td width="150"><div align="right" class="style73">contact artist for availability</div></td>'+
'</tr>'+
'</table>';
cap[2] = '<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="281" height="54"><div align="left" class="style73"> <span class="style74">Forest Ridge Rd II</span><br>' +
'acrylic on birch panel<br>' +
'48 x 48in</div></td>' +
'<td width="150"><div align="right" class="style73">available at Circa Gallery</div></td>' +
'</tr>' +
'</table>';
cap[3] = '<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="281" height="54"><div align="left" class="style73"> <span class="style74">Dreaming</span><br>' +
'acrylic on birch panel<br>' +
'24 x 24in</div></td>' +
'<td width="150"><div align="right" class="style73">contact artist for availability</div></td>' +
'</tr>' +
'</table>';
cap[4] = '<table width="350" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="250" height="54"><div align="left" class="style73"> <span class="style74">Ray Hill Road</span><br>' +
'acrylic on birch panel<br>' +
'48 x 44in;</div></td>' +
'<td width="100"><div align="right" class="style73">contact artist for availability</div></td>' +
'</tr>' +
'</table>';
cap[5] = '<table width="480" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="281" height="54"><div align="left" class="style73"> <span class="style74">Venatna</span><br>' +
'acrylic on canvas<br>' +
'55 x 66in</div></td>' +
'<td width="150"><div align="right" class="style73">available at Julie Nester Gallery</div></td>' +
'</tr>' +
'</table>';
cap[6] = '<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="281" height="54"><div align="left" class="style73"> <span class="style74">I Could Only Say</span><br>' +
'acrylic on birch panel<br>' +
'36 x 36in</div></td>' +
'<td width="150"><div align="right" class="style73">SOLD</div></td>' +
'</tr>' +
'</table>';
cap[7] = '<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="281" height="54"><div align="left" class="style73"> <span class="style74">Opium</span><br>' +
'acrylic on birch panel<br>' +
'36 x 36in</div></td>' +
'<td width="150"><div align="right" class="style73">contact artist for availability</div></td>' +
'</tr>' +
'</table>';
cap[8] = '<table width="380" border="0" align="center" cellpadding="0" cellspacing="0">' +
'<tr>' +
'<td width="281" height="54"><div align="left" class="style73"> <span class="style74">Pathways</span><br>' +
'acrylic on birch panel<br>' +
'16 x 16in</div></td>' +
'<td width="150"><div align="right" class="style73">SOLD</div></td>' +
'</tr>' +
'</table>';

</script>
</head>
blah blah blah
<!--Begin: Main Body -->
<td width="1000"><table width="1020" border="0" cellspacing="0" cellpadding="0" align="center" class="TableMovie"

blah blah blah
<td height="457" valign="top"><div align="center"><img id="fullsize400high" src="../../images/portfolio/Port-I/400high/dreaming.jpg" alt="dreaming" border="0"></a><br>
</div>
<div id="caption">
<table width="390" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="281" height="54"><div align="left" class="style73"> <span class="style74">Dreaming</span><br>
acrylic on birch panel<br>
24 x 24in</div></td>
<td width="150"><div align="right" class="style73">contact artist for availability</div></td>
</tr>
</table></div></td>
<td valign="top"><table width="196" height="383" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="98" height="99"><a href="p-ForestRidgeRd1-650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/ForestRidgeRd1.jpg" alt="painting" width="55" height="55" border="0" onMouseOver="display('/images/portfolio/Port-I/400high/ForestRidgeRd1.jpg', 1);"></a></td>
<td width="98"><a href="p-ForestRidgeRd2-650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/ForestRidgeRd2.jpg" alt="painting" width="55" height="55"border="0" onMouseOver="display('/images/portfolio/Port-I/400high/ForestRidgeRd2.jpg', 2);"></a></td>
</tr>
<tr>
<td height="99"><a href="p-dreaming650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/dreaming.jpg" alt="painting" width="55" height="55" border="0" onMouseOver="display('/images/portfolio/Port-I/400high/dreaming.jpg', 3);"></a></td>
<td><a href="p-ray-hill-rd650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/RayHillRd.jpg" alt="painting" width="55" height="55" border="0" onMouseOver="display('/images/portfolio/Port-I/400high/RayHillRd.jpg', 4);"></a></td>
</tr>
<tr>
<td height="99"><a href="p-ventana650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/Ventana7.jpg" alt="ventana" width="55" height="55" border="0" onMouseOver="display('/images/portfolio/Port-I/400high/Ventana7.jpg', 5);"></a></td>
<td><a href="p-I-could-only-say650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/icouldonlysay.jpg" alt="painting" width="55" height="55" border="0" onMouseOver="display('/images/portfolio/Port-I/400high/icouldonlysay.jpg', 6);"></a></td>
</tr>
<tr>
<td height="99"><a href="p-opium650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/Opium.jpg" alt="painting" width="55" height="55" border="0" onMouseOver="display('/images/portfolio/Port-I/400high/Opium.jpg', 7);"></a></td>
<td><a href="p-pathways650.shtml"><img src="../../images/portfolio/Port-I/thumbs55/Pathways.jpg" alt="pathways" width="55" height="55" border="0" onMouseOver="display('/images/portfolio/Port-I/400high/Pathways.jpg', 8);"></a></td>
</tr>
</table></td>
</tr>

</table>
<p>&nbsp;</p>
<!--End: Main Body -->
</body>
</html>
artisartsy
08-22-2010, 04:45 PM
newbie explanation of how it works:

the answer was to make the images sit inside a div, then link the div to the page you want: there are two parts to making this work:

first, make a js doc like this: // JavaScript Document

function display(image, targetlink, n) {
document.getElementById('xxx').src = image;
document.getElementById('fullsizeHREF').href = targetlink;
document.getElementById('caption').innerHTML = cap[n];
}
refer to this document in the <head> tags near the top of your page, or put this there

second, identify the container where the display images are to show. it might look something like this, especially if you are using tables for the page layout:

<td height="xxx" valign="xx,top, bottom, your choice"><div align="xx, center"><a href="xx your link here xx" id="fullsizeHREF"><img id="xx however you want to name your id xx" src="this is where you put your path to your image source. depends on where you keep your images in your root folder.jpg"></a>

so far, this image display is not a clickable link yet.
the third part involves telling which displayed image will link to where you want it to go: might look something like this:

<td height="xx"><img src="path to where you keep your images on your root folder.jpg" onMouseOver="display('/path to where you keep this image on your root folder.jpg', '/portfolio-pages/Port I/p-ventana650.shtml');"></td>

the key is, after you set the image source, then you have a comma, then a space, then you set the path to the link.

feel free to check out my web page to view example of this, and source codes: http://eisenfeld.com/portfolio-pages/Port%20IV/p-goldsaybrook-thumbs.shtml

enjoy,