The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> What is best way to mouseover link to change an image?
whistler
post Jan 10 2011, 12:08 PM
Post #1


Member
***

Group: Members
Posts: 73
Joined: 25-December 10
Member No.: 13,462



I am building a webpage with one image and 10 links beside it. I would the mouseover for each link to change the image to one that corresponds with the particular link. I have read many suggestions for doing this, including CSS, javascript but each method seems to produce an unwieldy amount of code, and the javascript method causes link flickering.

What is the best method and where would I find and example?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
Reply to this topicStart new topic
Replies(1 - 4)
Darin McGrew
post Jan 10 2011, 02:24 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



Here's a CSS-based one that doesn't flicker:
http://meyerweb.com/eric/css/edge/popups/demo2.html
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
whistler
post Jan 10 2011, 06:49 PM
Post #3


Member
***

Group: Members
Posts: 73
Joined: 25-December 10
Member No.: 13,462



QUOTE(Darin McGrew @ Jan 10 2011, 03:24 PM) *

Here's a CSS-based one that doesn't flicker:
http://meyerweb.com/eric/css/edge/popups/demo2.html


Thanks Darin, it looks like a good option. While waiting for your feedback, I found and studied this javascript tutorial, and am thinking to use it...but...

in addition to changing the image with each mouseover of the links, I want to shoe different tex to match each new image created by the mouseover...

How would I do that? Do I have to make the text an image and change two images at the same time or maybe put the image together with the text in a combined image...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jan 10 2011, 07:34 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



No. And you may be able to do that with CSS too. There is no hack that fits all and we don't know very much about your page, how much text you want to show and where, so it's hard to say if CSS or JS would be best.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jan 10 2011, 09:42 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 8,365
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



This example changes text on rollover:
http://meyerweb.com/eric/css/edge/popups/demo.html

It shouldn't be too hard to apply the technique to changing both the image and the text.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 04:19 AM