Reply
Mouseover Link
Old 08-06-2004, 04:05 PM Mouseover Link
Novice Talker

Posts: 11
Hey guys,

This might be a task here. I hope you guys can help me out. Okay, I'm making a website and I want to make it so an image changes when I move my coursor over a graphic button. Like the one on http://www.jennyhyun.tv/links.php How when you move your coursor over the text like a different picture pops up with description. Only I don't want description.

An image is below


When I move my coursor over the menu buttons at the bottom, I want the picture to change where the photo of the guys on the top right corner is.

Can anybody help me out please???
riceboy is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 08-06-2004, 04:47 PM
praveen's Avatar
Life is a Dream

Latest Blog Post:
Lack of Inspiration
Posts: 3,572
Location: in a distant land far away from reality
in order to do that, u need to use layers or divs and will need to break up the image..

u can do it in one image, but it will be a big file which will increase your load time.

which one u wanna do??
__________________
Praveen
Web Tools - Smilies - Celebs - Bookmarks - Indian Food - Create a Poll

Useful Threads, Tutorials and Resources
Graphics - Templates - Dreamweaver - Javascript - SEO - Ruby on Rails - Ajax Tutorials - More Ajax - CSS - More CSS
praveen is offline
Reply With Quote
View Public Profile Visit praveen's homepage!
 
Old 08-06-2004, 04:49 PM
webwoRRks's Avatar
Ultra Talker

Posts: 426
Location: I hope so
ok, this is an example, it should be cross browser compatible;

HTML Code:
<script language="Javascript">
function changePic(url) {
  if(document.getElementById) { document.getElementById("myPic").src = url; }
  else if(document.all) { document.all['myPic'].src = url; }
  return;
}
</script>

<img id="myPic" src="pic1.jpg"><br>
<b onmouseover='javascript:changePic("pic2.jpg");'>Next pic</b>
webwoRRks is offline
Reply With Quote
View Public Profile Visit webwoRRks's homepage!
 
Old 08-06-2004, 05:14 PM
praveen's Avatar
Life is a Dream

Latest Blog Post:
Lack of Inspiration
Posts: 3,572
Location: in a distant land far away from reality
just to let u know, webworks code assumes u will be breaking up your image and will use divs..

also, its for changin images and not for the rollover thing u want
__________________
Praveen
Web Tools - Smilies - Celebs - Bookmarks - Indian Food - Create a Poll

Useful Threads, Tutorials and Resources
Graphics - Templates - Dreamweaver - Javascript - SEO - Ruby on Rails - Ajax Tutorials - More Ajax - CSS - More CSS

Last edited by praveen : 08-06-2004 at 06:54 PM.
praveen is offline
Reply With Quote
View Public Profile Visit praveen's homepage!
 
Old 08-06-2004, 05:49 PM
webwoRRks's Avatar
Ultra Talker

Posts: 426
Location: I hope so
I posted that on the fly
webwoRRks is offline
Reply With Quote
View Public Profile Visit webwoRRks's homepage!
 
Old 08-07-2004, 01:34 AM
Novice Talker

Posts: 11
Well guys,

Obviously I'd have to cut up the pic... I already did do that... Check it out http://www.attherockshow.org/nsp/breakthrough/nav.html

I want the top right pic to turn into the pic http://www.attherockshow.org/nsp/bre...news_over2.gif when I put my courser over any one of the bottom option menu. Basically sorta like what http://www.jennyhyun.tv/links.php has but instead, my mouseover pic is at the top right...

God I'm like desperate... Please help me out!
riceboy is offline
Reply With Quote
View Public Profile
 
Old 08-07-2004, 04:10 AM
webwoRRks's Avatar
Ultra Talker

Posts: 426
Location: I hope so
look at my code... the answers there, just replace the id's and URL's, then add the onmouseover code to whatever you want to react. It's really that simple.
__________________
Theres 10 types of people; those who understand binary, and those who don't.
webmaster and webdeveloper resources, http://www.webworrks.com
webwoRRks is offline
Reply With Quote
View Public Profile Visit webwoRRks's homepage!
 
Reply     « Reply to Mouseover Link
 

Thread Tools

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
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.16088 seconds with 12 queries