Results 1 to 2 of 2

Thread: Help With Image Map With Rollovers and More

  1. #1
    Join Date
    Dec 2008
    Posts
    1

    Help With Image Map With Rollovers and More

    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

  2. #2
    Join Date
    Feb 2006
    Location
    Salisbury UK
    Posts
    4,332
    I think you've nearly got it right. If you have a main image with the words porphyrias and porphyrins in it then you can set a rectangle over each word with coordinates, which you seem to have done. So your code is used to put a link over the words in the main image and hovering just shows a hand pointer, but not to change the main image or to put a small image over the word when hovering. My tutorial item 1 http://www.wickham43.supanet.com/tut...imagemaps.html is almost exactly the same.

    You can put a small image when hovering over each word in the main image as item 2b in the above link underneath the hand pointer. I don't think you can change the whole main image, but you can put a different small image with different text over the text of each word in the main image.

    Although item 2b is on my image maps page, it isn't using the image maps principle with usemap and coordinates, etc; it is in fact just images layered over a background-image. The main div has the background-image and position: relative and the normal and hover states have small divs with background-images layered over the top with position: absolute.

    What I did was to have a transparent image over the place I wanted the link for the normal state because I discovered that a blank patch shows otherwise. I used the same transparent image I used for example 2a for convenience which is bigger than necessary, but I did discover that it's best to make the transparent images a bit bigger than the normal images used on hover. Since they are transparent, they don't show how big they are.

    A normal image is used for the hover state. I used the same gold normal image for both links but you can separate the hover styles and use different images. Look at the head section styles for #map2 a#maleswan2 and a#femaleswan2.

    I think the difference between urls being relative to the site or the document probably just means using a local url like porphyriasmainpage.html or an external url like www.yourdoamin/porphyriasmainpage.html

    At present you have urls
    C:\Documents and Settings\Marvin & Angelique\My Documents\Websites\Porphyrins & Porphyrias\porphyriasmainpage.html which will never work online. Get rid of C:\Documents and Settings\Marvin & Angelique\My Documents\Websites
    and just link to Porphyrins & Porphyrias\porphyriasmainpage.html and then make sure that your hosting service directory structure has the same Porphyrins & Porphyrias sub-directory and that the root directory is equivalent to your websites folder.

    Don't have spaces in directories/folders and filenames and I think using & is not allowed in some situations. It's better to have no spaces or to use a - like
    Porphyrins-and-Porphyrias
    Last edited by Wickham; 03 Dec 2008 at 03:10 AM.
    Code downloaded to my PC will be deleted in due course.
    WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
    Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •