JavaScript Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 



Go Back   Dev Articles Community ForumsProgrammingJavaScript Development

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
  #1  
Old August 12th, 2003, 08:46 PM
robsta robsta is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Location: Pacific NW, U.S.A.
Posts: 145 robsta User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 16
Question javaScript - Looking for a script to handle text rollover event

Hi -

I'm looking for a script that will allow me do text rollover in a secondary location on the page in response to a text MouseOver event.

Anyone know of a source for something like this?

All suggestions/comments welcome.

Thanks -
Robsta

Last edited by robsta : August 12th, 2003 at 09:00 PM.

Reply With Quote
  #2  
Old August 12th, 2003, 10:40 PM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
 
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
Can you explain this a little better? - i'm confused

Reply With Quote
  #3  
Old August 12th, 2003, 11:52 PM
robsta robsta is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Location: Pacific NW, U.S.A.
Posts: 145 robsta User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 16
Hi Stumpy -

I knew someone would ask me this... here goes. There's probably a technical term for what I'm trying to do that would explain things perfectly.

It's similar to an img rollover where img#1 and img#2 are in different locations on the page - when you mouseOver img#1, img#2 performs the rollover event. I'd like to be able to do this, but with text instead of images. MousingOver txt#1 changes the text of txt#2.

Does this make sense - I know how to do this with images. Can this be done with text?

What term adequately expresses this?

All the best,
Robsta

Reply With Quote
  #4  
Old August 13th, 2003, 12:10 AM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
 
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
Gotcha!

Yes - the property you are looking for is called "innerhtml". From memory it works something like:
Code:
//obtain your object (e.g. objID)
objID.innerhtml = "your new text here"
Basically, you'll need to wrap the text that you want changed in a DIV or SPAN. To relate it to an image rollover, you are essentially substituting .src with .innerhtml.

If my example is useless, click here for more info

Reply With Quote
  #5  
Old August 13th, 2003, 01:00 AM
robsta robsta is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Location: Pacific NW, U.S.A.
Posts: 145 robsta User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 16
Thumbs up Thanks mate!!

Hi Stumpy -

Thanks for the speedy reply. I'll give it a spin.

Do I need to preload the text? Do I handle the text as an imported .txt file (similar to the way I'd handle an image file)? Do I treat this similarly to the way I've worked with img rollovers in the past?

For example (using this img rollover script to illustrate):

<script language="JavaScript">
<!-- Begin
// Preload Images
var image1 = new Image(); image1.src = "imgs/image1.jpg";
var image2 = new Image(); image2.src = "imgs/image2.jpg";
var image3 = new Image(); image3.src = "imgs/image3.jpg";
var image1b = new Image(); image1b.src = "imgs/text1.jpg";
var image2b = new Image(); image2b.src = "imgs/text2.jpg";
var image3b = new Image(); image2b.src = "imgs/image3.jpg";
// End -->
</script>

<div id="pic1"><a href="#" onmouseover="image1.src='imgs/image1.jpg'; image1b.src='imgs/text1.jpg';" onmouseout="image1.src='imgs/text1.jpg'; image1b.src='imgs/blank1.jpg';">
<img name="image1" src="imgs/text1.jpg" height="149" width="222" border="0"></a></div>

Would you mind elaborating further with a wee snippet of code?

Thanks for the Mozilla link - as always, when I'm in uncharted territory, the learning curve's steep and I'm slow to catch on.

Thanks again -
Robsta

Reply With Quote
  #6  
Old August 13th, 2003, 01:17 AM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
 
Join Date: Aug 2002
Posts: 2,056 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 44 m 22 sec
Reputation Power: 0
The text you want to replace is the same as the img url you'd use when using .src - you can store it in a JS variable, or use a literal string. There's nothing fancy about it.

Reply With Quote
  #7  
Old August 13th, 2003, 01:34 AM
robsta robsta is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Location: Pacific NW, U.S.A.
Posts: 145 robsta User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 16
Thanks again.

Hi -

Thanks for your reply. I'll take a stab at it tomorrow and let you know how it turns out.

- Robsta

Reply With Quote
  #8  
Old August 13th, 2003, 08:04 AM
dhouston's Avatar
dhouston dhouston is offline
Contributing User
Dev Articles Beginner (1000 - 1499 posts)
 
Join Date: May 2003
Location: Tennessee
Posts: 1,355 dhouston User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to dhouston
The following works in Mozilla, IE, and Konqueror and should give you a good base from which to start.

Code:
<html>
<head>
<script language="javascript">

function toggle(id,text){
    d=document.getElementById(id);
    d.innerHTML=text;
}

</script>
</head>
<body>
<a href="" onmouseover="toggle('thetext','Hello!')" onmouseout="toggle('thetext','Goodbye!')">Hover Here</a><br><br>
<div id="thetext">
</div>
</body>
</html>

Reply With Quote
  #9  
Old August 13th, 2003, 07:46 PM
robsta robsta is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Location: Pacific NW, U.S.A.
Posts: 145 robsta User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 16
Thumbs up Thanks guys!!!

Thanks dHuston and Stumpy. Works beautifully.

If I wanted to add a hyperlink to the toggle 'hello!', how would I implement that?

- Robsta

Reply With Quote
  #10  
Old August 14th, 2003, 08:10 AM
dhouston's Avatar
dhouston dhouston is offline
Contributing User
Dev Articles Beginner (1000 - 1499 posts)
 
Join Date: May 2003
Location: Tennessee
Posts: 1,355 dhouston User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 17
Send a message via ICQ to dhouston
Just add it as you would a normal link. In the code sample I provided, I just left the "href" parameter empty, but you could stick a link in for that value as you would any other hyperlink in standard HTML.

Reply With Quote
  #11  
Old August 14th, 2003, 11:10 AM
robsta robsta is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
 
Join Date: Jul 2003
Location: Pacific NW, U.S.A.
Posts: 145 robsta User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 16
Lightbulb

Duh! Thanks.

Much embarassment -
robsta

Reply With Quote
Reply

Viewing: Dev Articles Community ForumsProgrammingJavaScript Development > javaScript - Looking for a rollover script to handle text event


Developer Shed Advertisers and Affiliates


Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump

Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 


Powered by: vBulletin Version 3.0.5
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap