Forum Moderators: not2easy

Message Too Old, No Replies

Inserting gifs with hotspots into a webpage

Turns into htm file when you add hotspot; want to insert in webpage

         

LABachlr

12:12 am on Aug 20, 2003 (gmt 0)

10+ Year Member



I made a gif in Fireworks and added a hotspot so that I can link it to a website. Since it creates an .htm page out of it for the hotspot, how can I insert that into another webpage? Is this possible?

MonkeeSage

12:26 am on Aug 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



LABachlr:

Try this:

<iframe id="ifrm" src="hotspot.htm" height="100px" width="100px">
Alternate text for non-iframe browsers
</iframe>

I've never used Fireworks so I don't know exactly what it does for 'hotspots', but the above is how you load a page within another page without using a frameset.

You can also add some styling to get rid of the 'frame look' it has by default. E.g.,

<style type="text/css">
#ifrm { border: none; padding: none; margin: 0px; }
</style>

HTH
Jordan

le_gber

8:24 am on Aug 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you look at the html code of your outputted page you should spot something like this:

<img name="Untitled1" src="Untitled-1.gif" width="500" height="500" border="0" usemap="#m_Untitled1" alt=""><map name="m_Untitled1">
<area shape="rect" coords="142,200,302,281" href="#" alt="" >
</map>

first is your image:
<img name="Untitled1" src="Untitled-1.gif" width="500" height="500" border="0" usemap="#m_Untitled1" alt="">

the usemap is the name of the map that the browser will use for the hotspot

the their is your map:

<map name="m_Untitled1">
<area shape="rect" coords="142,200,302,281" href="#" alt="" >
</map>

This tell the browser to look for the rectangular area located on 142,200 (top left corner coordinate) and finishing on 302,281 (bottom right corner coordinate).

Hence all you need to do is cut and past the whole code where you want your image-map to be.

Hope this helps

Leo

LABachlr

8:34 am on Aug 20, 2003 (gmt 0)

10+ Year Member



....Hence all you need to do is cut and past the whole code where you want your image-map to be.

I figured it out, and that is exactly what I did. I just hadn't had a chance to post it. Thanks, Leo.