Log in

View Full Version : 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
<!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">