Printable View
I'm using Javascript to swap out text when an image is rolled over. Is there a way to get the original text on rollout so I can use the same function for multiple chunks of text??
You can see an example of what I'm doing (with the code) here:
http://www.brianwpiper.com/css/js3.html
Thanks!!
You can just change your function like so:Code:function rollOverImage(obj){
var el = document.getElementById("foo");
var original = el.innerHTML;
el.innerHTML = "Now this has changed too";
obj.onmouseout = function(){
el.innerHTML = original;
};
}
hope this code will solve your porblem...
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Change</title>
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_setTextOfTextfield(objName,x,newText) { //v3.0
var obj = MM_findObj(objName); if (obj) obj.value = newText;
}
//-->
</script>
</head>
<body>
<div align="center">
<input name="text" id="text" border="0" />
</div>
<p><a href="javascript:;" onmouseover="MM_setTextOfTextfield('text','','This is the first change')">
<img src="img_small01.jpg" alt="img_small01" width="60" height="60" /></a></p>
<p><a href="javascript:;" onmouseover="MM_setTextOfTextfield('text','','This is the second change')">
<img src="img_small02.jpg" alt="img_small02" width="60" height="60" /></a></p>
</body>
</html>
PERFECT!!! Thanks for the help!! Works great!!
NICE!!!
Shoot...thought I was all set with this (and marked it resolved)...BUT, I need to apply the same rollover text to multiple ids, and when I add another image with the same id, it makes the rollover on the first id on the page...how can I make the function work for each id on the page?? I'm sure it's some sort of for loop, but I'm not sure how to set it up in js...I could do it in AS, but not sure how it translates...
HELP!!
You can see what I've got at:
http://brianwpiper.com/css/js3.html
Thanks!!
For one, two objects can't have the same ID, you'd need to use a class. Second, there is no native document.getElementsByClassName. Well, there is, but only Firefox 3 and Safari 3 implement it, so you can't use it yet. SO, that brings us to the simplest solution: bust out jQuery! Take a look at how I modified this function:PHP Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>multi rollover</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <!-- Oh hey, look, it's jQuery! -->
<script type="text/javascript">
function rollOverImage(obj, class, newText){
$(obj).unbind("mouseout"); //remove all old mouseout event listeners so things don't overlap.
$('.'+class).each(function(){ //loop through all objects that match the class name
var t = $(this); //store local reference to this
var original = t.text(); //better than .innerHTML with jQuery
t.text(newText);
$(obj).mouseout(function(){ //Attach event listener for mouseout to the rolled over object
t.text(original); //sets it back to the original text
})
});
}
</script>
</head>
<body>
<div>
<img src="green.jpg" alt="" onmouseover="rollOverImage(this, 'happy', 'I\'m happy!')"/>
</div>
<div class="happy">
original text
</div>
<div>
<img src="green.jpg" alt="" onmouseover="rollOverImage(this, 'happy', 'I\'m happy, also!')"/>
</div>
<div class="happy">
original text #2
</div>
</body>
</html>
That's really close...only thing is that one rollover changes both the objects rollovers...
I actually got it to work using the following:
Which you can see at:Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
function rollOverImage(obj){
var el;
el = obj.parentNode.nextSibling.nextSibling;
var original = el.innerHTML;
el.innerHTML = "Happy";
obj.onmouseout = function(){
el.innerHTML = original;
}
}
function rollOverSad(obj){
var el;
el = obj.parentNode.nextSibling.nextSibling;;
var original = el.innerHTML;
el.innerHTML = "Sad";
obj.onmouseout = function(){
el.innerHTML = original;
}
}
</script>
</head>
<body>
<div>
<img src="green.jpg" alt="" onmouseover="rollOverImage(this)"/>
</div>
<div id="happy">
original text
</div>
<div>
<img src="green.jpg" alt="" onmouseover="rollOverImage(this)"/>
</div>
<div>
original text #2
</div>
<div>
<img src="green.jpg" alt="" onmouseover="rollOverSad(this)"/>
</div>
<div>
original text #3
</div>
</body>
</html>
http://www.brianwpiper.com/css/js3.html
Let me know if you see any problems with that, and THANK YOU for the help on this...certainly need to bone up on my css/javascript and jquery...
Thanks!!!
Ha, I was under the impression that that's what you wanted!
Sorry about that, then. I thought it was weird myself, but ignored that hunch. If that's the way you wanna go, then use this revised function:Then for your onmouseover:Code:function rollOverImage(obj, newText){
var el;
el = obj.parentNode.nextSibling.nextSibling;
var original = el.innerHTML;
el.innerHTML = newText;
obj.onmouseout = function(){
el.innerHTML = original;
}
}
Code:onmouseover="rollOverImage(this, 'Happy')"
SWEET!! That's perfect!! Keeps it down to one function and makes it easy to update for the client...amazing how something can start out with so much code and then get down to the cleanest chunk based on what you really need...
Thanks again!!!
this works great! is there a way for buttons in a flash menu to swap text like that upon being clicked?
Absolutely...it's much easier to do in flash (at least for me), than in js...
Just change the .text in your dynamic field on rollover...
Hope that helps!