SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Changing image in just one area of a map

    Hi to you all!
    Could anybody help me with that problem?
    I have a mapped image and I want to change mapped parts of the image.
    For example when I get a cursor over one area the image in that area would change for another (the same size of course).
    Or for example I have mapped solar system and after clicking one of the planet the planet will change color (so the image will be switched just in that area).
    Is that achievable?
    Thanks a lot for your help!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yes it's achievable, but I wouldn't do this with image maps. Image maps just use one single image for the background, with the <area> elements being clickable "hotspots" laid on top of the image.

    I would simply have a background image in a DIV, then put all the planets in as individual images. Using CSS, position them absolutely, with respect to the DIV. Then using javascript it's a simple task to attach onmouseover and onmouseout event handlers to the images to change their src value.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot But is there no threat that in different browsers it would look differently?

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Up until about 2005, maybe. Nowadays no, even IE6 can cope with absolute positioning without throwing a fit. What you want to do is not especially complicated. If you have a go at it, i.e. the HTML and CSS bits, I'll help you with the JS.

  5. #5
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've made it! Thanks a lot
    Could you please say only what kind of program do you use for positioning?

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Er... a text editor? I just write the CSS by hand.

  7. #7
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, css in text editor but to create maps (where it is handy to see all X Y positions of the areas).

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I haven't made an image map for many years, but when I did in the past I used dreamweaver.


Tags for this Thread

Bookmarks

Posting Permissions

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