porphyrins
02 Dec 2008, 02:45 PM
Hello All,
Since I am not sure how to "get to" my question about image maps without explaining some things first, I will try to detail as best as I can where I am at and what I need to know. Bear with me :)
I am new to web design, but have messed around using Dreamweaver, Photoshop, Fireworks and some others. I have uploaded some generic pages to my site (mostly family stuff with no real navigation or bells/whistles).
I also used a Dreamweaver template to create my very first website which is here: http://www.solar.webliographies.net/index.html
This was just a way for me to share some goodies that I found while doing a project. I am not really too concerned about the solar site since I was learning how to do stuff using the template.
Now I have another project I want to do. Ultimately, I want a website where I can put downloadable files such as word or .pdf, links and other info related to porphyrins and the diseases known as the porphyrias. I also would LOVE to know how to have a forum/discussion area and a few other things, but that is for later.
I started my project by making an image in photoshop for my "home" page where users would have a choice of going into the main area for porphyrias OR the main area for porphyrins. I have the image completed and have three image files. I want to have the image change when the user rolls over the hotspots.
Image 1 - Main image showing the text in normal state
Image 2 - Main image but with text "porphyrias" changed when hovered over
Image 3 - Main image but with text "porphyrins" changed when hovered over
I can "sorta" understand the idea of using javascript and an image map, so I created an imaged map using "Handy Image Mapper" and the "Main image" and have that code ready, but I cannot figure out how to get a rollover effect using the other two images? (I have tried using Fireworks and Dreamweaver to make an image map, but it does not seem to work, so I am trying to learn the code myself instead, does that make any sense?)
Then, in my files I have the .html for the main porphyria page as well as the .html for the main porphryins page, but neither are uploaded to the site yet (nothing is uploaded for this project yet). I am not sure I understand how to correctly link the image map to these pages. I also do not quite understand the difference between the URL being relative to the "site" or the "document".
Here is the code for the image map
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="136,64,533,178" HREF="C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Porphyrins & Porphyrias\porphyriasmainpage.html" TITLE="Porphyrias">
<AREA SHAPE="RECT" COORDS="205,241,612,351" HREF="C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Porphyrins & Porphyrias\porphyrinsmainpage.html" TITLE="Porphyrins">
</MAP>
<IMG SRC="C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Website Stuff\Imagemap\Text Up.gif" USEMAP="#map1" BORDER="0">
So, I guess my first questions are:
What code might be used to add the rollover effects to the image map?
and
Can someone summarize the difference between the urls being relative to the site or the document?
Thanks a million!!!
Ang
Since I am not sure how to "get to" my question about image maps without explaining some things first, I will try to detail as best as I can where I am at and what I need to know. Bear with me :)
I am new to web design, but have messed around using Dreamweaver, Photoshop, Fireworks and some others. I have uploaded some generic pages to my site (mostly family stuff with no real navigation or bells/whistles).
I also used a Dreamweaver template to create my very first website which is here: http://www.solar.webliographies.net/index.html
This was just a way for me to share some goodies that I found while doing a project. I am not really too concerned about the solar site since I was learning how to do stuff using the template.
Now I have another project I want to do. Ultimately, I want a website where I can put downloadable files such as word or .pdf, links and other info related to porphyrins and the diseases known as the porphyrias. I also would LOVE to know how to have a forum/discussion area and a few other things, but that is for later.
I started my project by making an image in photoshop for my "home" page where users would have a choice of going into the main area for porphyrias OR the main area for porphyrins. I have the image completed and have three image files. I want to have the image change when the user rolls over the hotspots.
Image 1 - Main image showing the text in normal state
Image 2 - Main image but with text "porphyrias" changed when hovered over
Image 3 - Main image but with text "porphyrins" changed when hovered over
I can "sorta" understand the idea of using javascript and an image map, so I created an imaged map using "Handy Image Mapper" and the "Main image" and have that code ready, but I cannot figure out how to get a rollover effect using the other two images? (I have tried using Fireworks and Dreamweaver to make an image map, but it does not seem to work, so I am trying to learn the code myself instead, does that make any sense?)
Then, in my files I have the .html for the main porphyria page as well as the .html for the main porphryins page, but neither are uploaded to the site yet (nothing is uploaded for this project yet). I am not sure I understand how to correctly link the image map to these pages. I also do not quite understand the difference between the URL being relative to the "site" or the "document".
Here is the code for the image map
<MAP NAME="map1">
<AREA SHAPE="RECT" COORDS="136,64,533,178" HREF="C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Porphyrins & Porphyrias\porphyriasmainpage.html" TITLE="Porphyrias">
<AREA SHAPE="RECT" COORDS="205,241,612,351" HREF="C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Porphyrins & Porphyrias\porphyrinsmainpage.html" TITLE="Porphyrins">
</MAP>
<IMG SRC="C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Website Stuff\Imagemap\Text Up.gif" USEMAP="#map1" BORDER="0">
So, I guess my first questions are:
What code might be used to add the rollover effects to the image map?
and
Can someone summarize the difference between the urls being relative to the site or the document?
Thanks a million!!!
Ang