Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    J__
    J__ is offline
    Junior Member
    Join Date
    Jan 2005
    Location
    RTP, NC, USA
    Posts
    11
    Member #
    8747
    Hi,
    I'm new here and looking forward to learning from the forums as well as giving back too.

    Suppose I have an image, say a picture of a house and In front of the house is a mailbox. I would like to move my mouse of the mailbox and have the mail box highlight, say draw a soft yello line around the mail box. I'm thinking basicallly generate a mouse over event.

    I know how to do a rollover for a button, but the part I am a little confused about is how to swap just the mail box, it's just a small section of the entire image. I don't want to swap the whole image. I'm guessing an image map might be the way to go.

    Is it? or is there some other preferred (uh recommended ) technique I should be using?


    Thanks for your help in advance,
    Sincerely,
    J

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    Here's a Javascript method:

    http://catpin.com/highlight/

    (view HTML source to see the code)

    It uses a 50 X 50 transparent .gif image of a yellow square.


  4. #3
    J__
    J__ is offline
    Junior Member
    Join Date
    Jan 2005
    Location
    RTP, NC, USA
    Posts
    11
    Member #
    8747
    Quote Originally Posted by mlseim
    Here's a Javascript method:

    http://catpin.com/highlight/

    (view HTML source to see the code)

    It uses a 50 X 50 transparent .gif image of a yellow square.
    -----

    Hi,
    Thanks for the link, neat.
    The only thing is that when I mouse over any part of the image, a the people in the picture are highlited. I was hoping to have it work in that when you move the mouse over the people, then the rectangle appeared.

    Is that much harder to do? Again what is the preferred way to do this javascript or image map.... probably both eh? ...

    thanks so much for the response,
    I appreciate,
    sincerely,
    J

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    I found a better way ... easier, and you can add a tooltip also.
    It uses only the main image, no other images needed.


    See the example now ...

    http://catpin.com/highlight/


  6. #5
    J__
    J__ is offline
    Junior Member
    Join Date
    Jan 2005
    Location
    RTP, NC, USA
    Posts
    11
    Member #
    8747
    Quote Originally Posted by mlseim
    I found a better way ... easier, and you can add a tooltip also.
    It uses only the main image, no other images needed.


    See the example now ...

    http://catpin.com/highlight/

    HI!
    Thanks so much, I really appreciate that. It looks great -- BUT... I guess I wasn't clear in my definition of highliting a 'section'. This is why i wondered if an image map was the way to go...
    The parrt of the image I want to highlite when I mouse over (and be able to click) will likely be a non-rectangular shape. For example, a triangle or a polygon. Or ??

    but the example you provided was really nice, you should write up a tutorial on it. (I'd read it).
    ... polygon selection.

    thanks again, much appreciated.
    sincerely,
    J__

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    OK ... I know what you mean.

    In your case, you'll have to have a full-size duplicate image that
    totally overlays the part you want? If the object shape is really
    complex, I don't know of any other way. Where your main image
    is a <div> background and the overlayed images are placed over
    the background on mouseovers?

    You should be looking into a Flash method (as image mapping) is
    sort of becoming obsolete? I'm not a Flash expert, so I haven't
    steered you that way ... but I really think you should look into that.


  8. #7
    J__
    J__ is offline
    Junior Member
    Join Date
    Jan 2005
    Location
    RTP, NC, USA
    Posts
    11
    Member #
    8747
    Quote Originally Posted by mlseim
    OK ... I know what you mean.

    In your case, you'll have to have a full-size duplicate image that
    totally overlays the part you want? If the object shape is really
    complex, I don't know of any other way. Where your main image
    is a <div> background and the overlayed images are placed over
    the background on mouseovers?

    You should be looking into a Flash method (as image mapping) is
    sort of becoming obsolete? I'm not a Flash expert, so I haven't
    steered you that way ... but I really think you should look into that.
    thanks for the response. Ah so we hit the ceiling of what image maps can do?
    I have seen maps (united states) done with image maps..... but I had been thinking
    about flash from the beginning. There are other 'places' I want to go with the interactivity anyway. So, I guess I have to go dig into flash.

    when i get the hang of it, I'll try to post a follow up, just in case anyone was interested.

    thanks again the help and suggestions
    sincerely,
    J


Remove Ads

Posting Permissions

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

Search tags for this page

highlight a piece of image html

,

highlight a section of an image

,

highlight section of image

,

highlight section of image in javascript

,

how to highlight a section in in design

,

how to highlight object in image

,

how to highlight parts of a image in html

,

how to highlight parts of an image for website

,

how to highlight section of picture in apple

,

html highlight part of image

Click on a term to search for related topics.
All times are GMT -6. The time now is 12:16 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com