Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Image Rollovers

A

abagofcandy

macrumors newbie
Original poster
Apr 30, 2009
3
0
Hello,

I have an image in a table. I would like that image to a different image when you cursor over a line of text.

Example;

No cursor, Image 1 is shown.
Cursor over "Z text" --> image 2 is shown
Cursor over "Y text" --> image 3 is shown.

Thanks for your time and consideration,
Sofia
 
dornoforpyros

dornoforpyros

macrumors 68040
Oct 19, 2004
3,070
4
Calgary, AB
**************************. ;)

In all honesty though you'll find CSS rollovers are the way to go, they load faster and only rely on 1 image file instead of 2 separate files. So when some one rolls over the image you won't have to worry about a possible delay in loading the image or preloading a bunch of images in the body tag.

best of luck
 
A

abagofcandy

macrumors newbie
Original poster
Apr 30, 2009
3
0
I searched google for no less than 15 minutes before I made an account and posted here.

Google is not giving me what I need. I do not desire to have an image change when I roll my mouse over it, and that is all I am able to find through google.
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Well, you could have likely modified what you found to fit your situation, but here's an example.
HTML: 
<ul id="img-links">
  <li><a href="image01.jpg">Image 1</a></li>
  <li><a href="image02.jpg">Image 2</a></li>
  <li><a href="image03.jpg">Image 3</a></li>
</ul>
<div><img id="img" src="image01.jpg" /></div>

<script type="text/javascript">
var imgLinks = document.getElementById('img-links').getElementsByTagName('a');
for (var a=0, b=imgLinks.length; a<b; ++a) {
  imgLinks[a].onmouseover = function() {
    document.getElementById('img').src = this.href;
    return false;
  };
  imgLinks[a].onmouseout = function() {
    document.getElementById('img').src = 'image01.jpg';
    return false;
  };
}
</script>
 
Melrose

Melrose

Suspended
Dec 12, 2007
7,806
399
dornoforpyros said:
**************************. ;)

In all honesty though you'll find CSS rollovers are the way to go, they load faster and only rely on 1 image file instead of 2 separate files. So when some one rolls over the image you won't have to worry about a possible delay in loading the image or preloading a bunch of images in the body tag.

best of luck
Click to expand...

I'd recommend using CSS to accomplished image rollovers. Javascript is okay, don't get me wrong, but I prefer not having to load an extra file.

ALA should have a good article on it, but it's really not that complicated a technique. Google should do nicely. Just search for "CSS image rollovers"

:)
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Melrose said:
I'd recommend using CSS to accomplished image rollovers. Javascript is okay, don't get me wrong, but I prefer not having to load an extra file.

ALA should have a good article on it, but it's really not that complicated a technique. Google should do nicely. Just search for "CSS image rollovers"

:)
Click to expand...

The OP wants the image to show up in a different spot than where the links being moused over are at. This is much trickier with CSS depending on the exact HTML he's working with.

Here's one of those trickier solutions.
 
angelwatt

angelwatt

Moderator emeritus
Aug 16, 2005
7,852
9
USA
Melrose said:
Apologies. I have a difficulty with reading comprehension (seriously). I'm overtired and missed his point...

Still, it is good to know it can be done with CSS nonetheless...
Click to expand...

Well, that assumes I'm comprehending her correctly. The part that stuck out for me was the mentioning of tables. It could go either way though, we'll see if the OP comes back.
 
A

abagofcandy

macrumors newbie
Original poster
Apr 30, 2009
3
0
Hello,

I'd like to take the time to extend my personal thanks to angelwatt for perfectly answering my question. You've been a great help.

- Sofia
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom