PDA

View Full Version : Show Hide DIV using Image



jpaulraj
07-14-2006, 08:21 PM
The script of below link is used to show and hide DIV tags. They have used onclick events on link and button. I need to have an image instead of submit button to show and hide a DIV. Can this be done?

http://softflow.co.uk/design/Test/ToggleTest

I tried replacing an image instead of a link, after saving and refreshing the page, i can see the image but once i click on it the image, the image goes off and the link is there !! can someone please tell me how to use IMG tags instead of link (href) and input button tags?

Thanks

jscheuer1
07-15-2006, 04:11 AM
In the head:


<script type="text/javascript">
function toggle(id){
var el=document.getElementById(id);
el.style.display=el.style.display=='block'? 'none' : 'block';
}
</script>

In the body:


<img src="some.gif" onclick="toggle('theDiv');"><br>
<div id="theDiv" style="display:block;">Some content here</div>

Jesdisciple
07-15-2006, 05:00 AM
That solution looks like it will work, but I want to note something it doesn't look like jpaulraj realized: you can have an image element enclosed by an anchor element.
<a href=wherever.html><img src=whatever.gif></a>So an image can become a link.

jscheuer1
07-15-2006, 05:26 AM
That solution looks like it will work, but I want to note something it doesn't look like jpaulraj realized: you can have an image element enclosed by an anchor element.
<a href=wherever.html><img src=whatever.gif></a>So an image can become a link.

Oh it works but, if you make the image a link (at least as shown in your example), it won't work. It will load wherever.html instead.

jpaulraj
07-15-2006, 02:46 PM
Thanks guys... but i need to have image in the place of buttons in the script link that i posted.. i have used this for the entire app.. now if i change the script, i've got to change it everywhere.. can you please customize the code so that i can use image instead of submit buttons and link..

I tried using <a href="..."><img tag></a> code, it looks ok but once you click on the image, the image goes off and a submit button gets displayed there !!