image+ div layer (cnt text)?

[kurnusimppu]

I have an image and I'm trying to add a script "into" it.

<img src="images/logo.gif">

The script is transparent div (text) layer which is supposed to
show when clicking the image.

<div id="Layer1" style="div.transbox; z-index:1" class="transbox">
<p>Here we have text...</p>
</div>

and CSS-file:
div.transbox
{
width: 320px;
height: 350px;
margin: 5px;
background-color: #ffffff;
border: 1px solid black;
filter:alpha(opacity=60);
opacity:0.4;
padding: 3px;
position: absolute;
left: 564px;
top: 267px;
font-family: "Trebuchet MS";
Arial
font-size: 10px;
font-style: normal;
color: #000000;
text-decoration: none;
font-size: 11px;
font-weight: bold;
text-indent: 0pt;
}

Pls, someone, HELP me to combine this stuff!

[csuguy]

in the CSS - add this to the transbox section:

visibility:hidden;

That will make it hidden by default. Then, on the image, use the onclick attribute to link it to a JS function you create. For example:

<img src="images/logo.gif" onclick="javascript:showDiv();">

Then, in your JS - create a function called showDiv() which switches the visibility of Layer1 to show.

[rocknbil]

This won't work across all browsers (esp. IE6.) Apply your onClick to the natural click element, the anchor:

<a href="#" onClick="return showDiv();"><img src="images/logo.gif"></a>

Note the return, and be sure to add return false; at the end of your showDiv() function. This tells the browser to not follow the normal action for an anchor, so the link won't scroll to the page top when clicked.