| View previous topic :: View next topic |
| Author |
Message |
magicthegatherist
Joined: 04 Mar 2008
Posts: 7
|
 Posted: Tue Mar 04, 2008 8:21 am Post subject: Dynamic 'Image Map'? |
 |
|
What would be the easiest way to make an image map that would behave dynamically?
Essentially, I'm making an image with 6 'buttons' arranged in a circle. Each would be set to be a link, and this is easy enough using an image map.
I want it to behave 'dynamically' though, so whenever the user hovers over a linked area, the image within the mapped coordinates changes.
I know this is probably going to be totally different than an image map in the end, but any advice would be great |
|
| Back to top |
|
 |
|
|
rangana
250+ Club
Joined: 27 Feb 2008
Posts: 438
Location: Cebu City Philippines
|
| Posted: Tue Mar 04, 2008 8:29 am Post subject: Re: Dynamic 'Image Map'? |
|
|
Image map would'nt be ideal (for me). You could slice up your image, so that having the hover effects would be easy enough. I could give you a sample
..and besides it's difficult to load a page having a number of images.
Hope make some sense  |
|
| Back to top |
|
|
magicthegatherist
Joined: 04 Mar 2008
Posts: 7
|
| Posted: Tue Mar 04, 2008 8:32 am Post subject: Re: Dynamic 'Image Map'? |
|
|
See, I would use a table, or something else to slice it up, the problem is though, that the arrangement is circular.
I would certainly do this if it were easier... Do you know an easy way to achieve this with sliced images? |
|
| Back to top |
|
|
rangana
250+ Club
Joined: 27 Feb 2008
Posts: 438
Location: Cebu City Philippines
|
| Posted: Tue Mar 04, 2008 8:55 am Post subject: Re: Dynamic 'Image Map'? |
|
|
I could see all posibilites in CSS, except when it is a sliced image. I could'nt think of a better way.
In logic, we have a whole image, we map the big image and adjust the coordinates as to provide a link.
I can't figure this one out using image map. My apologies... |
|
| Back to top |
|
|
magicthegatherist
Joined: 04 Mar 2008
Posts: 7
|
| Posted: Tue Mar 04, 2008 9:42 am Post subject: Re: Dynamic 'Image Map'? |
|
|
Well, any example that can be provided would be great!
I'm not bound to any specific format, so CSS, imagemaps, anything!
Hope you can provide an example of sorts...
Thanks in advance |
|
| Back to top |
|
|
rangana
250+ Club
Joined: 27 Feb 2008
Posts: 438
Location: Cebu City Philippines
|
| Posted: Tue Mar 04, 2008 9:45 am Post subject: Re: Dynamic 'Image Map'? |
|
|
You could have this code as a start:
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
html,body{spacing:0;padding:0;}
#right {
width: 260px;
padding: 0px;
border: 3px solid #211E08;
margin:1px auto;
text-align:center;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li {
margin: 1px;
padding: 0px;
width: 100px;
text-align: right;
}
#right a {
width: 100px;
display: block;
background: #222;
color: #efefff;
font: 11px Tahoma, Arial;
border-left: 12px solid #9999cc;
text-decoration: none;
margin: 1px auto;
padding: 0px;
border-right:5px solid #cfcfcf;
line-height:30px;
}
#right a:hover {
color: #fff;
background: #B8AA7D;
border-left: 12px solid #0000ff;
}
</style>
<title>My Page</title>
</head>
<body>
<div id="right">
<h3>Menus</h3>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">DevPPL.com</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Links</a></li>
</ul>
<br/>
</div>
</body>
</html>
|
Basically, it's not a circle, it's just a simple hover effects, but with great effects (for me). 
Hope this helps |
|
| Back to top |
|
|
|
