| » Forum Index » Problems and solutions » Topic: Linking images. |
|
Posted on 28/10/08 9:07:32 PM |
|
james
Surreal Spoofer Posts: 1194 Reply  |
Linking images.
Linking images, ref:-This weeks challenge. I have a static signpost indicating three destinations, each of which need to link with an appropriate animation. It must be possible. Do I need to create web pages? Help please. |
Posted on 28/10/08 9:46:03 PM |
|
maiden
Golden Gif Gagster Posts: 471 Reply  |
Re: Linking images.
It will have to be a webpage for links. You can create a slice over the picture using the Slice Tool (looks like a craft knife) drag a box around each sign post destination and it will slice the image into Slices. Then Right Mouse Click the Slice and select Edit Slice Options. Where it says Url: enter the url address of your animation for that Slice. In Target: put "_self" without the quotes - so that the animation open in the same window or "_blank" if you want it to open in a seperate window. It's also considered good internet form to add some text to the Alt Text: box - usually something that explains what the link links to. e.g. "my animation 03" or something Save for Web and Device and you can optimise each slice independently save as HTML and Images (*.html) The sliced parts of the image will be put into a folder named "images" when you upload these to your website ensure that you copy the contents of the images folder to your images directory don't just copy the folder and contents else the webpage for the signpost will not be able to link to it unless you alter the souce html code in Dreamweaver or similiar application to point to another location. |
Posted on 28/10/08 9:46:20 PM |
|
steve hill
Brain Basher Posts: 228 Reply  |
Re: Linking images.
hi james I think what you are looking for is image mappping a method of selecting different arears of an image to link to web pages or different arears of the same page. it looks like it has been taken out of photoshop cs3 but can be done in Image ready. you could also do this in your web site buiding software, if you are coding yourself this link may help http://www.htmlcodetutorial.com/images/images_famsupp_220.html |
Posted on 29/10/08 6:45:21 PM |
|
james
Surreal Spoofer Posts: 1194 Reply |
Linking images.
Maiden, and Steve, thank you for your response. I am trying to work Maidens tutorial without success. I’m misunderstanding something; don’t know what, wow is me. Steve’s suggestion seems a little complex, and there isn’t a deal of time, however I shall be looking. Thank you both. |
Posted on 30/10/08 00:58:33 AM |
|
dave.cox
Marquee Master Posts: 518 Reply  |
Re: Linking images.
Hi James, It's really pretty easy. Click here to see an example of this in action. Click on each sign to see a different link. Here is the code that you can copy to a html page to do what you want. Change the name of the image and the links to your links. The "coords" are pixel locations on your page to define the clickable area. "Rect" defines a box, or "poly" defines an irregular shaped polygon. <html><head> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/JavaScript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } //--> </script> </head> <style> body { font-family: verdana, arial, sans-serif; font-size: 12pt; color: #333; background-color: #fff; margin: 0pt; padding: 0pt; } </style> <body onLoad="MM_preloadImages('images/Restorations_h.jpg','images/Weekly_h.jpg')"> <table width="99%" height="433" border="0"> <tr> <td width="1%" height="290"> </td> <td colspan="3"><img src="signpost.jpg" alt="Convert Steve to a Cartoon" width="610" height="900" border="0" usemap="#Map"></td> <td> </td> </tr> </table> <map name="Map"> <area shape="rect" coords="338,103,584,253" href="http://www.google.com" target="_blank"><area shape="poly" coords="33,259,291,270,287,394,35,387" href="http://www.howtocheatinphotoshop.com" target="_blank"> <area shape="poly" coords="345,273,573,285,572,397,345,395" href="http://www.davesdfr.com" target="_blank"> </map></body> </html> |
Posted on 31/10/08 9:22:03 PM |
|
james
Surreal Spoofer Posts: 1194 Reply |
Re: Linking images.
Dave. Thank you for the paragraph of coding, regretfully I am unable to make it work as in your example. Although the links are present within the static image they are not on the post signs but randomly elsewhere, when you hit one a small hand appears, and they do work. Another problem would be putting a web page on the forum. A little out of my depth I feel. Your effort to help is appreciated, thanks again. |