Switch Images with an existing script... [Archive]

Click to See Complete Forum and Search --> : Switch Images with an existing script...

weee

05-26-2004, 01:41 PM

Hi there.

I have a simple script that opens a div (show & hide) and I woul dlike to add an image to it (like a + and - thing) whenever the div is open there's an image and when it's close there's a different one.

How can I do it?

Here's the code:

<script language="JavaScript">

</script>

<body>

<a href="javascript:SH(po21)">Show</a><br><br>
<div id="po21" style="display:none;">
Hello World
</div>

</body>

Thanks

karlmcauley

05-26-2004, 03:04 PM

Hello;

This is an example of how it would work based on hiding and showing the contents of a div tag with images. I have attached the immages for you also. It works a treat.

<html>
<head>
<title>Whatever </title>
</head>

<SCRIPT LANGAUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">

// images to be used for showing and hiding content
plus=new Image(); plus.src='../images/darkplus.gif';
minus=new Image(); minus.src='../images/darkminus.gif';

function showHide()
// shows or hides the content between the div tags
{
if (document.getElementById("official").style.display=="block")
{
document.getElementById("official").style.display = "none";
document.getElementById("showHideImgA").src = plus.src;
}
else
{
document.getElementById("official").style.display = "block";
document.getElementById("showHideImgA").src = minus.src;
}
}

</script>

<body>

<FORM id="whatever" method="post">

<DIV id=official style='display:none'>
<table width="100%" border="0">
<tr>
<td>//place whatever you have to in here in </td>
</tr>
</table>
</DIV>

<TABLE>
<TR>
<TD><A href="javascript: showHide()" title="click to show/hide div tags content"><IMG id=showHideImgA src=../images/darkplus.gif>show/hide div tags content </A>
</TD>
</tr>
</table>

</form>

</body>

karlmcauley

05-26-2004, 03:06 PM

Sorry i forgot to add the plus image. it is attached to this.

Cheers
Any probs let me know.

weee

05-26-2004, 03:15 PM

why you didn't use my code at all?
is it bad or wrong?

Thasnk

Tage

05-26-2004, 06:01 PM

Your script only has minor problems of compatibility from what I can see.
put type="text/javascript" in your <script> tag
use document.getElementById(msg_id) instead of just msg_id
put apostrophes around po21 in the <a> tag
then I have no problems with it
Now you can do something like this...
<html>
<head>
<title></title>
<script type="text/javascript">

</script>
</head>
<body>
<a href="javascript:SH('po21')">Show</a><img src="plus.gif" id="po21_img"><br><br>
<div id="po21" style="display:none;">
Hello World
</div>
</body>
</html>You might want to switch around the plus and minus gifs depending on what you have in mind. Also, preloading the images might be good. I don't know if my script has any mistakes I'm overlooking, but it works somewhat. Later...

Tage

weee

05-27-2004, 04:45 PM