homepage Welcome to WebmasterWorld Guest from 54.167.75.155
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
Is there a way to make mouseovers within a background?
twaller




msg:970751
 2:59 pm on Jan 19, 2003 (gmt 0)

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




msg:970752
 3:17 pm on Jan 19, 2003 (gmt 0)

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




msg:970753
 7:23 am on Jan 20, 2003 (gmt 0)

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




msg:970754
 9:27 am on Jan 20, 2003 (gmt 0)

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




msg:970755
 8:40 pm on Jan 20, 2003 (gmt 0)

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




msg:970756
 5:18 am on Jan 21, 2003 (gmt 0)

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




msg:970757
 7:56 am on Jan 21, 2003 (gmt 0)

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>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved