Bespoke Images as complex buttons - Advice appreciated

Bespoke Images as complex buttons - Advice appreciated

by SamuelRobertCochrane » Tue May 01, 2012 9:29 pm

I'm having lots of fun with HTML and feel i have come a long way! I've just encountered an obstacle however, and feel i may need some help overcoming it!
Basically I'm creating a website for some photographs and animations, For the main page i have (somewhat painstakingly in illustrator & photoshop) created a complex mosaic of cropped images.
These images i intended to act as links to their respective galleries, I'd like to click each individual picture and have it redirect to another page.

The problem is that the link code i am using makes the entire image (including its alpha channel or transparency) into a link.
As many images interlock the alpha channel often intrudes over the next image, obscuring or interfering with its link.

To put it shortly: I need to know if i can define an image's 'button" attribute to its visible bounds and not to its entirety. Ideally this would be an export option in photoshop as I've gone through the process of making the images separate entities. If its not however I'm open minded and ultimately will do what it takes to finish this task.

Im going to attach two examples of consecutive images which i hope will be of help. I'm also going to attach my code - there is some css in there also.

Thank you.

Attachments

1. Obstacle 2.zip (136.66 KiB) Downloaded 434 times

Re: Bespoke Images as complex buttons - Advice appreciated

by chrisf1288 » Tue May 01, 2012 11:00 pm

I'm not totally sure of what your asking but I think you want each picture on the image to have a different link. Right?
Well one way of doing this is to create image maps (http://www.quackit.com/html/tutorial/html_image_maps.cfm). You can use Gimp 2 to help create the image map, because the coordinates can get a little bit tricky.
Or you could separate the images and use Jquery Masonry (http://masonry.desandro.com/) to make the images look nice together.

Re: Bespoke Images as complex buttons - Advice appreciated

by XainPro » Wed May 02, 2012 6:36 am

to apply link on specific image area the image area is used
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

for further information visit
http://www.w3schools.com/tags/tag_map.asp

Re: Bespoke Images as complex buttons - Advice appreciated

by SamuelRobertCochrane » Wed May 02, 2012 11:54 pm

People,

First of all I want to thank both of you for your assistance.
Chris I looked at your web tutorial and learn a great deal from it, Xain yours was also indispensable as it showed maps in action.

I'm having some strange issues however. I mapped co-ordinates for my first image (Image R1 IM1 in the zip file) I found that it was accurate on one side but always seemed to stray from the map at the fith co-ordinate (I'm just trying to make the whole visible image a clickable link). A second image (Image R1 IM2) works well with its coordinates but seems to make the first images linking area even less accurate when its added to the page.

I've been over the coordinates with a fine tooth comb using photoshop and a mapping website which allowed me to draw a shape on the image itself. Both coordinates were much the same but still failed to render the entire image as a linking area.

So far i have Div mapped 50 of my images into a grid, I've held off applying coordinates until i work out why i cant seem to successfully map R1 IM1.

Attached is a extract from my code with just two images placed and mapped - They behave oddly.

If either of you have time i could use your advice. If you need the entire code let me know.

*UPDATE* I've actually just isolated the code for the first image and found the map to be perfectly accurate. However it still distorts beyond all recognition when placed next to the second. I isolated the code earlier however and got the results mentioned? I used a different computer but the same browser (chrome).

Here is the code with the two images...

<html>
<head>
<title>Proto Teeth</title>

<style type="text/css">
body {background-image:url('Test Background - Web 2P.jpg'); background-repeat:no-repeat;background-position:left top;}

#LOGO { position: absolute; top: 0px; left: 0px;
width: 100%; }

#R1IM1 { position: absolute; top: 777px; left: 334px;
width: 100%; }

#R1IM2 { position: absolute; top: 729px; left: 382px;
width: 100%; }

</style>

<div id="LOGO">
<img src="LOGO ADJUST CROP 32Smoother.png" alt="some_text"/>
</div>

<div id="R1IM1">
<img src="Layers PNG-24 REDUCED 38.39/R1 IM1" width="181" height="133" border="0" alt="R1IM1" usemap ="#R1IM1"/>
</div>

<map id ="#R1IM1"
name="#R1IM1">
<area shape ="poly" coords ="47,0,180,0,120,132,0,131,35,60,47,0"
href ="http://en.wikipedia.org/wiki/html"
alt="Mount Cook" />
</map>

<div id="R1IM2">
<img src="Layers PNG-24 REDUCED 38.39/R1 IM2" width="247" height="181" border="0" alt="R1IM2" usemap ="#R1IM2"/>
</div>

<map id ="#R1IM2"
name="#R1IM2">
<area shape ="poly" coords ="0,38,139,0,246,52,78,180,140,42,0,43"
href ="http://en.wikipedia.org/wiki/Mount_Cook"
alt="Mount Cook" />
</map>


</head>
<body>
</body>
</html>

Thanks Samuel.

Re: Bespoke Images as complex buttons - Advice appreciated

by XainPro » Thu May 03, 2012 4:34 am

you should use adobe Dreamweaver design interface to visually draw your click able areas.