PDA

View Full Version : [Question]How do i add... Links to a photoshop design?



kimmag
12 Nov 2009, 01:31 PM
Hello! I'm quite new to the photoshop designing, though i just have tried HTML and CSS before. (Have a bit knowlegde in PHP / SQL though)

I have made a design in Photoshop, saved it in .GIF, but now i want links to my page. I've tried a program called "MapThis!" to make links, but the links won't work when i've exported and so.. Here's the code so someone can check it.
<BODY>
<MAP NAME="infrc">
<!-- #$-:Image Map file created by Map THIS! -->
<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:1.30 -->
<!-- #$AUTHOR:***** -->
<!-- #$DATE:Mon Nov 09 21:37:52 2009 -->
<!-- #$PATH:http://www.*************.gif -->
<!-- #$GIF:******.gif -->
<IMG SRC="http://www.*******************.gif" USEMAP="#<the map thing here" WIDTH="1024" HEIGHT="768" BORDER="0">
<AREA SHAPE=RECT COORDS="44,278,237,325" HREF="www.*****/*****.html" ALT="The about me page">
<AREA SHAPE=RECT COORDS="276,278,443,327" HREF="www.*****/****.html" ALT="The music page">
<AREA SHAPE=RECT COORDS="473,276,702,324" HREF="www.*****/****.html" ALT="A Guestbook.">
<AREA SHAPE=RECT COORDS="747,279,976,327" HREF="www.***********" ALT="A contact me form.">
<AREA SHAPE=default HREF="www.******.net">
</MAP>
</BODY>
The <MAP> </MAP> comes from the program. This is the whole Index.htm.

It doesn't seem to work, so I have the following questions:
1. Is there any other ways to make links ON one image?
2. If so, how ?

Please answer my question, i've tried to solve this for a few days, and i'm out of ideas, i've even tried to email the producent of the program "MapThis!".

Have a nice day.
Kim.

zachsformacs95
31 Dec 2009, 01:04 AM
I'm not very familiar with image maps, but I think you need to declare your img before the map, not inside of it. Also, the usemap attribute needs to equal the map name. So, your code should look something like this:



<img src="http://www.*******************.gif" usemap="#infrc" width="1024" height="768" border="0" />

<map name="infrc">
<area shape="rect" coords="44,278,237,325" href="www.*****/*****.html" alt="The about me page" />
<area shape="rect" coords="276,278,443,327" href="www.*****/****.html" alt="The music page" />
<area shape="rect" coords="473,276,702,324" href="www.*****/****.html" alt="A Guestbook." />
<area shape="rect" coords="747,279,976,327" href="www.***********" alt="A contact me form." />
<area shape="default" href="www.******.net" />
</map>


Hope it works!