onClick and images

dbaseboy · Nov 13, 2004

Hi folks, just trying to get started on HTML (more a database kinda person!)

My problem:

I have set up a table (table1) containing 2 columns, the first column contains a nested table (table2) of 2x2 each containing a thumbnail. Each thumbnail has the onmouseover and onmouseout properties and these work great however I want to get it so that when user clicks the image then the large image in the second column of table 1 changes accordingly. Ive tried the onClick but it doesnt seem to work for me. each Image in table2 was set up as an (A HREF... link but when I click then it attempts the HREF jump. Im a bit stumped, tried putting onClick in the <IMG SRC...> tabs but nothing, tried in the <A HREF..> and it causes the images to disappear.

If anyone could lead me by the hand I'd be grateful.

Cheers

Peter

audiopro · Nov 13, 2004

I have never attempted to do rollovers on a mouse click but I have done something similar using mouseover.
Take a look at

http://www.torrisholmemethodist.co.uk

for an example.
Run your mouse over the text items below the picture of the church.

Keith

http://www.studiosoft.co.uk

Vragabond · Nov 13, 2004

Showing some of the code would be useful. Try adding return false; at the end of your onclick="" events, that will prevent the href to be executed. Though your problem seems more like referencing an element by clicking on another. Do that by giving the referenced element id="somevalue" value and then use DOM (document.getElementById('somevalue')) to retrieve that element. Again, with more code, we'll be able to help you better.

dbaseboy · Nov 13, 2004

Okay, heres the code so far.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--

var image1 = new Image();
image1.src = "images/dannii1.gif";
var image2 = new Image();
image2.src = "images/dannii2.gif";
var image3 = new Image();
image3.src = "images/dannii3.gif";
var image4 = new Image();
image4.src = "images/dannii4.gif"

function roll(img_name1, img_src1)
{
document

.src = img_src1
}

function dispy(img_src2)
{
document[mainpic].src = img_src2
}
//-->
</SCRIPT>

<BODY BGCOLOR="black">

<table border=0 cellpadding=0 cellspacing=0 bgcolor=black>

<tr><td>
<table border=0 cellpadding=0 cellspacing=0 bgcolor=black>
<tr><td>

<IMG SRC="images/dannii1bw_th.gif" onmouseover="roll('pic1','images/dannii1_th.gif')" onmouseout="roll('pic1','images/dannii1bw_th.gif')" onClick="dispy('images/dannii1.gif')"NAME="pic1" BORDER="0"></A></td>
<td>
<A HREF="col2.html" onmouseover="roll('pic2','images/dannii2_th.gif')" onmouseout="roll('pic2', 'images/dannii2bw_th.gif')">
<IMG SRC="images/dannii2bw_th.gif" NAME="pic2" BORDER="0"></A></td>
</tr>
<tr><td>
<A HREF="col2.html" onmouseover="roll('pic3','images/dannii3_th.gif')" onmouseout="roll('pic3', 'images/dannii3bw_th.gif')">
<IMG SRC="images/dannii3bw_th.gif" NAME="pic3" BORDER="0"></A>
</td>
<td>
<A HREF="col2.html" onmouseover="roll('pic4','images/dannii4_th.gif')" onmouseout="roll('pic4', 'images/dannii4bw_th.gif')">
<IMG SRC="images/dannii4bw_th.gif" NAME="pic4" BORDER="0"></A>
</td></tr>

</table></td>
<td><IMG SRC="images/splash1.jpg" NAME="mainpic" BORDER="0">
</td>
<td></td></tr>
</BODY>
</HTML>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

onClick and images

dbaseboy

Programmer

audiopro

Programmer

Vragabond

Programmer

dbaseboy

Programmer

Similar threads

Part and Inventory Search

Sponsor