change linked images

**arielmorry** · 06-05-2011, 09:06 AM

Hi,

i have login form that is shown by clicking an image,
i using the following function to toggle the form visibility,
in addition to what this function does, i need to create different images for mouse over, on click and mouse out, but, i need 6 states, 3 for when the div's visibility is on and 3 when it's off.

thanks for your help, i'm kind of lost here so anything will be good...

javascript:

function toggle() {
var ele = document.getElementById("LoginIframe");
var text = document.getElementById("toggleLogin");
if(ele.style.display == "block") {
ele.style.display = "none";
document.getElementById('toggleLogin').innerHTML = "<img src=img/__Up_Closed.png></img>";
}
else {
ele.style.display = "block";
document.getElementById('toggleLogin').innerHTML = "<img src=img/__Up_Open.png></img>";
}
}

html:

<div><a id="toggleLogin" href="javascript:toggle();" class="signin"><img src="img/__Up_Closed.png" alt="" /></a> </div>

**vwphillips** · 06-05-2011, 12:02 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<script type="text/javascript">
/*<![CDATA[*/

function toggle() {
 var ele = document.getElementById("LoginIframe");
 toggle.state=ele.style.display == "block"?1:0;
 ele.style.display =toggle.state==1?"none":'block';
 document.getElementById('toggleLogin').getElementsByTagName('IMG')[0].src = toggle.ary[toggle.state][2];
}

function swap(nu) {
 document.getElementById('toggleLogin').getElementsByTagName('IMG')[0].src = toggle.ary[toggle.state||0][nu];
}

toggle.ary=[
 ['http://www.vicsjavascripts.org.uk/StdImages/One.gif','http://www.vicsjavascripts.org.uk/StdImages/Two.gif','http://www.vicsjavascripts.org.uk/StdImages/Three.gif'],
 ['http://www.vicsjavascripts.org.uk/StdImages/Four.gif','http://www.vicsjavascripts.org.uk/StdImages/Five.gif','http://www.vicsjavascripts.org.uk/StdImages/Six.gif'],
]

/*]]>*/
</script></head>

<body>
<div><a id="toggleLogin" href="javascript:toggle();" class="signin"><img src="img/__Up_Closed.png" alt="" width="50" height="50" onmouseover="swap(0);" onmouseout="swap(1);" /></a> </div>
<div id="LoginIframe" style="width:500px;height:200px;background-Color:red;display:none;" ></div>
</body>

</html>

**arielmorry** · 06-06-2011, 05:27 PM

thank you!!!
that works great..

**arielmorry** · 06-09-2011, 10:26 AM

Hi vwphillips,

I'm using the code you gave me with just a little modification,
and everything works great, except for the fact that the the mouse stats starting to work after the first click... meaning there are no mouse over\click\out images before the first click.

do you have any idea why is that?

thank you for your help.

js code:

function toggle() {
var ele = document.getElementById("LoginIframe");
toggle.state=(ele.style.display == "block")?1:0;
ele.style.display =(toggle.state == 1)?"none":'block';
document.getElementById('toggleLogin').getElementsByTagName('IMG')[0].src = toggle.ary[toggle.state][2];
}

function swap(nu) {
document.getElementById('toggleLogin').getElementsByTagName('IMG')[0].src = toggle.ary[toggle.state][nu];
}

toggle.ary=[
['img/Up_Open.png','img/Over_Open.png','img/Down_Open.png'],
['img/Up_Closed.png','img/Over_Closed.png','img/Down_Closed.png'],
]

html:

<a id="toggleLogin" href="javascript:toggle();" class="signin"><img src="img/Up_Closed.png" alt="" onmouseout="swap(0);" onmouseover="swap(1);" onmousedown="swap(2);" /></a>
<div id="LoginIframe" style="display: none"><iframe src="loginpage.html" width="280" height="240" allowtransparency="true">

Thread: change linked images

Thread Tools

Search Thread

change linked images

Bookmarks

Bookmarks

Posting Permissions