Jump to content
Randomishlying

Overlapping Button Images

Recommended Posts

How can I make a button image overlap without overlapping the selectable areas? post-85917-0-33341100-1318624037_thumb.png My idea was to use the map and area tags to change the selectable area of each image but I don't know how to overlap the images.Honestly, I don't know if this is the best way to handle my problem and I would be more than happy to hear suggestions.

Share this post


Link to post
Share on other sites

This image should better describe what my problem is: post-85917-0-71353000-1318729238_thumb.pngAt the same time I would like the mouse over area of each button to not overlap any other button. That is why I was think that the map and area tags might come in handy, because I want the mouse over area for each button to be the very outside edge of the visible color, and not the edge of the image. Again I don't know if this is the best way to handle my problem. *shrug* I hope I helped clear up any confusion, and I hope to hear your suggestions.Thanks.

Share this post


Link to post
Share on other sites

You can make use of css:

position:relative;

to place the image ontop of the other. Ex:CSS:

img.two{position:relative; left: 20px}img.two:hover:{position:static}

HTML:

<img src="image.png" class="two"/><img src="image.png"/>

In the above code, the image, with class="two", will move forward by 20px, and cover the gap. If you mouseover it, it will come back to its normal position.

Edited by eTianbun

Share this post


Link to post
Share on other sites

This was helpful, though I do feel that I'll run into some problems with this at some point (still being new at this). Thank you for your suggestions.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...