-
anyone else hear that?
[RESOLVED] Javascript rollover text swap
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!!
Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.
-
Bearded (M|G)od
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>
-
anyone else hear that?
PERFECT!!! Thanks for the help!! Works great!!
NICE!!!
Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.
-
anyone else hear that?
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!!
Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.
-
Bearded (M|G)od
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>
Last edited by MyFriendIsATaco; 05-14-2009 at 11:50 AM.
Reason: Added in comments.
-
anyone else hear that?
That's really close...only thing is that one rollover changes both the objects rollovers...
I actually got it to work using the following:
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>
Which you can see at:
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!!!
Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.
-
Bearded (M|G)od
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:
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;
}
}
Then for your onmouseover:
Code:
onmouseover="rollOverImage(this, 'Happy')"
-
anyone else hear that?
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!!!
Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.
-
this works great! is there a way for buttons in a flash menu to swap text like that upon being clicked?
-
anyone else hear that?
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!
Love like you've never been hurt, live like there's no tomorrow and dance like nobody's watching.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|