Quantcast

Jump to content

» «
Photo

Making image clickable

4 replies to this topic
_-playero-_
  • _-playero-_

    Gangsta

  • Members
  • Joined: 26 Mar 2005

#1

Posted 12 May 2005 - 10:52 PM Edited by _-playero-_, 12 May 2005 - 11:01 PM.

So with this image;

user posted image

I want to make each color of the pie clickable, and each leading to a different page... but I have no idea on where to start... if anyone can give any help I would inlove.gif it!

Of course, it will be a better quality image.....

thanks


edit: image works now...
edit2:image really works now...

Barbaneez
  • Barbaneez

    Boss

  • Members
  • Joined: 01 Jun 2003

#2

Posted 13 May 2005 - 01:19 AM Edited by Barbaneez, 13 May 2005 - 01:35 AM.

Well, it's quite easy, in some ways at least - just a bit painstaking for time. Basically you just have to map out the coordinates that defy the clickable parts of the image. I'll get back to you with the coding later on.


Edit:
CODE
<div>
<img src="pie.jpg" alt="" usemap="#pie" style="border-style:none" />
</div>

<div>
<map id="pie" name="pie">
<area shape="poly"#Click on purple.
coords="235,117,117,118,60,218,67,223,77,228,92,232,124,236,148,232,171,223,189,212,204,198,219,177,229,157,233,136" href="purple.php" title="Click on purple." />
<area shape="poly"#Click on redorange.
coords="235,117,118,118,59,15,73,8,98,1,123,0,146,3,165,10,187,23,204,38,219,59,229,80,233,96" href="redorange.php" title="Click on redorange." />
<area shape="poly"#Click on blue.
coords="59,16,118,118,60,218,49,212,31,197,15,175,7,157,3,142,1,129,1,109,3,90,8,72,16,58,29,39,42,26" href="blue.php" title="Click on blue." />
<area shape="default" nohref="nohref" alt="" />
</map>
</div>

Use that coding above, (and change the specifics to what you need them to be - ex: made up filenames I used, image and link mouseover texts, and the "pie.jpg" name I used - I don't know if you have it named to the same thing.). Anyways, it's bound to work, the only thing left to do is to customize it to your needs, which is easy as pie! :P
I'm going to go take refuge since Johnno is going to come in here and start bitching about how obsolete HTML is and so on, :)

_-playero-_
  • _-playero-_

    Gangsta

  • Members
  • Joined: 26 Mar 2005

#3

Posted 16 May 2005 - 07:26 PM

Thanks dude!! Wow, I have no idea that was possible...

But, it doesn't work with a bigger image... sad.gif


Svip
  • Svip

    I eat babies

  • The Connection
  • Joined: 12 Nov 2001
  • None
  • Best Returning Member 2014
    Lifetime Achievement Award

#4

Posted 16 May 2005 - 10:53 PM

QUOTE (_-playero-_ @ May 16 2005, 21:26)
Thanks dude!! Wow, I have no idea that was possible...

But, it doesn't work with a bigger image... sad.gif


What do you mean?

You'd have to remember, you have to edit the coords too.

Since they are different when the size changes.

Knightmare
  • Knightmare

    man tongues

  • $outh $ide Hoodz
  • Joined: 18 Nov 2001

#5

Posted 17 May 2005 - 07:16 PM

QUOTE (Svip @ May 16 2005, 16:53)
QUOTE (_-playero-_ @ May 16 2005, 21:26)
Thanks dude!! Wow, I have no idea that was possible...

But, it doesn't work with a bigger image... sad.gif


What do you mean?

You'd have to remember, you have to edit the coords too.

Since they are different when the size changes.

This man has the answer.

You can use Photoshop to find the coordinates, I'm sure theres other programs out there as well.




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users