need help with a scripting issue

[ljharper62]

I currently have a web page coded with a mouseover event where the viewer can mouse over any of 4 links. The page image (thumbnail) and descriptive text changes depending upon which link is chosen. I would like to add the ability to open another browser with a larger view of the image. The link would also change depending on what link is chosen.

Any suggestions?

[jscheuer1]

Show us your code and be more specific about exactly what you want to have happen. Also, include a link to your current page. In any case, to open a link in a new window you can use the the window.open() method, ex:

<a href="big_picture.jpg" onclick="window.open(this.href,'','width=300, height=250');return false;" target="_blank"><img src="small_picture.jpg" border="0" onmouseover="your mouseover code here" onmouseout="your mouseout code here"></a>

But this raises alignment issues especially in IE in the new window. So, more elaborate code can be used, usually best written in a script elsewhere on the page as a function and called with parameters onclick. Or you can put the large image on a seperate page and use that page for the href. Then the alignment can be dealt with in the HTML code of that separate page.

[ljharper62]

The page isn't up yet but here's a sample of the code:

<table id="table3" bordercolor="#c7ebff" height="448" cellspacing="0" cellpadding="0" width="469" border="1">
<tbody>
<tr>
<td valign="middle" width="215" bgcolor="#ffffff" height="79" rowspan="3"><div id="addThumb"></div></td>
<td width="39" bgcolor="#c7ebff" height="16"><p align="center" class="style2">Item # </p></td>
<td width="95" bgcolor="#c7ebff" height="16"><p align="center"><strong>&nbsp;Price</strong></p></td>
<td width="116" bgcolor="#c7ebff" height="16"><p align="center"><strong>Buy Now!</strong></p></td>
</tr>
<tr>
<td valign="middle" width="215" bgcolor="#c7ebff" height="229" rowspan="3"><div id="addDesc"></div>
<p>&nbsp;</p>
<table id="table4" bordercolor="#c7ebff" height="185" cellspacing="0" cellpadding="0" width="215" border="1">
<tbody>
<tr>
<td width="3" bgcolor="#c7ebff" height="24">&nbsp;</td>
<td width="35" bgcolor="#c7ebff" height="24">&nbsp;</td>
<td width="2" bgcolor="#c7ebff" height="24">&nbsp;</td>
<td bgcolor="#ecf8ff" colspan="5" height="24"><p align="center"><a href="../images/WTE_tshirt_detail.jpg" target="_blank">click here for larger image &amp; more details</a></p></td>
<td width="4" bgcolor="#c7ebff" height="24">&nbsp;</td>
</tr>
<tr>
<td width="3" height="24">&nbsp;</td>
<td width="35" bgcolor="#ecf8ff" height="24">1</td>
<td width="2" bgcolor="#ecf8ff" height="24">&nbsp;</td>
<td width="79" bgcolor="#ecf8ff" height="24"><p onmouseover="document.getElementById('addThumb').innerHTML = '<img src=\'DVC00019.jpg\'/>'; document.getElementById('addDesc').innerHTML = '<p>This is Video A</p>';">Video A</p></td> <td width="4" bgcolor="#ecf8ff" height="24">&nbsp;</td>
<td width="52" bgcolor="#ecf8ff" height="24">$29.95</td>
<td width="17" height="24">&nbsp;</td>
</tr>
<tr>
<td width="3" height="24">&nbsp;</td>
<td width="35" height="24">2</td>
<td width="2" height="24">&nbsp;</td>
<td width="79" height="24"><p onmouseover="document.getElementById('addThumb').innerHTML = '<img src=\'blend.jpg\'/>'; document.getElementById('addDesc').innerHTML = '<p>This is Video B</p>';">Video B </td>
<td width="4" height="24">&nbsp;</td>
<td width="52" height="24">$29.95</td>
<td width="17" height="24">&nbsp;</td>
</tr>
<tr>
<td width="3" height="24">&nbsp;</td>
<td width="35" bgcolor="#ecf8ff" height="24">3</td>
<td width="2" bgcolor="#ecf8ff" height="24">&nbsp;</td>
<td width="79" bgcolor="#ecf8ff" height="24"><p onmouseover="document.getElementById('addThumb').innerHTML = '<img src=\'poster.jpg\'/>'; document.getElementById('addDesc').innerHTML = '<p>This is Video C</p>';">Video C </td> <td width="4" bgcolor="#ecf8ff" height="24">&nbsp;</td>
<td width="52" bgcolor="#ecf8ff" height="24">$29.95</td>
<td width="17" height="24">&nbsp;</td>
</tr>
</table>
The highlighted code is what I'm concerned with. When the viewer clicks to get a larger image, I want to make sure that they get the right image. I'm sure that I need to add a conditional statement, but I'm not sure how to add within this code.

Thanks

[jscheuer1]

Well, there is a lot of highlighted code up there but this:

<a href="../images/WTE_tshirt_detail.jpg" target="_blank">click here for larger image &amp; more details</a>

is the only part that will launch a new window and there is no question what image it will be. It will be:

../images/WTE_tshirt_detail.jpg

The same would be true with an onclick event, ex:

<a href="../images/WTE_tshirt_detail.jpg" target="_blank" onclick="window.open(this.href);return false;">click here for larger image &amp; more details</a>

or any other javascript event of this type that uses the hook this.href, as this.href (when used inside an anchor tag as part of a javascript mouse event) means the file mentioned in the anchor tag's href= field.