Need help with a "mouse over effect" | FerrariChat
Buy

Need help with a "mouse over effect"

Discussion in 'Other Off Topic Forum' started by TinaDK, Sep 20, 2005.

This site may earn a commission from merchant affiliate links, including eBay, Amazon, Skimlinks, and others.

  1. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #1 TinaDK, Sep 20, 2005
    Does anybody in here know how to make a mouseover effect in a part of an image??
    http://dtc.frac.dk at this site you'll see the girl in the top banner... she is holding a card... What I'm trying to do is this:
    hold your mouse over the card only (not the whole top banner) and the card will change to the ticket.
    But I have no clue how to do it.
    What I have done now isn't good enough as the whole picture is triggered.
     
  2. DavkeG

    DavkeG Formula Junior

    Jul 3, 2004
    719
    Belgium
    Full Name:
    Dave G.
    #2 DavkeG, Sep 20, 2005
  3. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #3 TinaDK, Sep 20, 2005
    If I understand correct this is only how too link :)
    I still need the mouseover effect /Image change at the same time :)
     
  4. DavkeG

    DavkeG Formula Junior

    Jul 3, 2004
    719
    Belgium
    Full Name:
    Dave G.
    #4 DavkeG, Sep 20, 2005
    I was kind of bored so I decided to do it myself, I hope you don't mind...I've almost got it to work, just a few more adjustments...I'll pm you the html code ok?
     
  5. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #5 TinaDK, Sep 20, 2005
    You are an angel!!! :)
    Yes please do that or you can mail it: [email protected]
     
  6. DavkeG

    DavkeG Formula Junior

    Jul 3, 2004
    719
    Belgium
    Full Name:
    Dave G.
    #6 DavkeG, Sep 20, 2005
    I mailed it because it was 57 letters too long for a pm :(
    I sent it using the "send an email to Mrs_Bugattiart" button because I hadn't read your post yet, I hope this isn't a problem.
     
  7. wax

    wax Five Time F1 World Champ
    Lifetime Rossa

    Jul 20, 2003
    52,415
    SFPD
    Full Name:
    Dirty Harry
    #7 wax, Sep 20, 2005
    I'm pulling names like "ticket" and "ticketmap" out of my ass, but your basic coordinates and html are here:

    <html>
    <body>
    <img src="banner_on.gif"
    width="800" height="200"
    alt="Ticket"
    usemap="#ticketmap" />

    <map id="ticketmap" name="ticketmap">

    <area shape="rect"
    coords="420,35,215,165"
    alt="Ticket"
    href="ticket.htm" />
    </map>

    </body>
    </html>

    Note re: 420,35,215,165

    420 = how far from left ticket begins
    35 = how far from top ticket begins
    215 = width of ticket
    165 = height of ticket

    As "rect" implies, this is a rectangle - given the ticket is at an angle, it makes the ticket active when you get close to the ticket, not just directly on it.
     
  8. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #8 TinaDK, Sep 20, 2005
    Thanks a lot Dave :)
    Now i'm trying to understand what you did... and if I just can save next months ticket in full size like i did :D
     
  9. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #9 TinaDK, Sep 20, 2005
    How do you find the Coordinates???
     
  10. DavkeG

    DavkeG Formula Junior

    Jul 3, 2004
    719
    Belgium
    Full Name:
    Dave G.
    #10 DavkeG, Sep 20, 2005
    You can open the image in paint, and move your mouse over it, you should see the coordinates somewhere at the bottom.
     
  11. wax

    wax Five Time F1 World Champ
    Lifetime Rossa

    Jul 20, 2003
    52,415
    SFPD
    Full Name:
    Dirty Harry
    #11 wax, Sep 20, 2005
    Last edited by a moderator: Sep 7, 2017
  12. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #12 TinaDK, Sep 20, 2005
    Yes now i've found out :)
    But then I should be able to follow the edges of the card too???
     
  13. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #13 TinaDK, Sep 20, 2005
    YES it worked :) just called it poly instead of rect :) And added the coordinates ! Thanks guys... now I understand this part fully too :)
     
  14. wax

    wax Five Time F1 World Champ
    Lifetime Rossa

    Jul 20, 2003
    52,415
    SFPD
    Full Name:
    Dirty Harry
    #14 wax, Sep 20, 2005
    All right! Glad you jumped straight to poly from the half-arsed rect semi-solution - I refreshed the site page and it works perfectly!

    'net sure makes the world a smaller place, doesn't it?

    I like how it goes clockwise with the poly coordinates:

    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" bgcolor="#F1F1F1">
    <tr>
    <td width="820">
    <a href="http://dtc.frac.dk/kalender.htm">
    <img src="http://dtc.frac.dk/images/banner_off.gif" name="banner" border="0" width="800" height="200" usemap="#bannermap">
    <map id ="bannermap" name="bannermap">
    <area shape ="poly" coords ="421, 89, 598, 32, 634, 140, 457, 197" onmouseover="mouseOver()" onmouseout="mouseOut()" href="web/kalender.htm"/>
    </map>
    </a>
    </td>
    </tr>
     
  15. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #15 TinaDK, Sep 20, 2005
    Well it's about figuring it out *LOL* not allways as easy as I think.
    Yes indeed !!! And thanks again!
     
  16. TinaDK

    TinaDK F1 World Champ

    Jun 23, 2004
    11,823
    Denmark
    Full Name:
    Tina Poulsen
    #16 TinaDK, Sep 20, 2005
    eehhh yes had to figure it out that it worked clockwise :D:D:D First i made a funny cross thingy :D
     

Share This Page