Is there a way to make mouseovers within a background?

[twaller]

I have a background with floating circles. Within those floating circles, I would like to make a mouseover that changes the circle to a picture. However, I want to keep the circles as part of the background and not mess with them as separate graphics that need to be perfectly placed on the background. Do you know how I would go about making such a mouseover using the background as it is?

[Birdman]

I suppose you could use CSS and absolutely position a transparent .gif and then use a javascript image-swap to load the actual picture onMouseover.

Did that make any sense?

<added> Welcome to Webmaster World!

[twaller]

Hi Birdman,

Thanks for your reply. Yes, that made sense, but I wonder if that is just as difficult as making the circles separate graphics anyway....

I suppose that is the only way, huh?

[chrisforeman2]

dynamicdrive.com have a script which changes the background colour of a table cell on mouseover.

why not put your image in a big table cell and use this script to change the colour.

chris

[BjarneDM]

twaller -
No matter what you do, you are in for a lot of trouble ;)

Q: how do you propose changing the circles to pictures?
Do you want to have a new background load for each circle?
Do you want to overlay the background with the pictures?

Q: Do you have other elements on the page that need clicking?
Do you have other elements at all on the page?

Possible solutions:
1) separate the background and the circles, and make the circles absolutely positioned. This has the advantage of making it easy to move your circles around.
Problem is, onmouseover and onmouseout isn't supported in all browsers for images. However, the same effect can be done in css with img.name:hover, but browsers that support the latter usually also support the former.

2) make an event listener that analyses the mouseposition on the page. You'll have to do a fair amount of mathematics calculating distances etc. This is the only solution I can see if you want to keep the backgound as-is, but it still doesn't address how you want to replace the circles

[twaller]

BjarneDM,

Thanks for your reply.

I see that this is going to be a bit difficult and perhaps easier to just separate the circles as graphics, though absolutely placing them sounds difficult as well... we may have to rethink the layout a bit then.

As for replacing the circles, if it is an image change, then with the mouseover, the filled circle would become a circular photograph. I don't want a new background for each circle unless it is a link to a new page.

On this particular page, we do not intend to have links for the mouseovers, but a clicking link on another part of the page as text. It is a bilingual page and this one will just be the intro page.

Thanks for your help again...

[BjarneDM]

As for replacing the circles, if it is an image change, then with the mouseover, the filled circle would become a circular photograph. I don't want a new background for each circle unless it is a link to a new page.

That's not possible without either
1) replacing the whole background
2) having hidden images absolutely positioned that you then make visible upon the mouseover.

My advise is to separate the background and the circles.

As for placing and re-placing them, that's simple :

method 1)
<img style="position:absolute; top:123px; left:456px;" onmouseover="this.src='new-image-url' onmouseout="this.src='org-circle-url'">

method 2)
in your stylesheet:
#circleName {background: center center no-repeat url(org-circle-url);
position:absolute; top:12px; left:34px; width:56px; height:78px;}
#circleName:hover {background: center center no-repeat url(new-image-url);}
in your html:
<div id="circleName"></div>