SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot abwebs's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, PA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover or Rollover?

    Hello all,
    I have what seems to be a simple idea, but I can't seem to figure out how to implement it. I'd like to have one .jpg swap for another .jpg when a user hovers over the image with their mouse, however I DO NOT want the .jpg to have an active link to another html page.

    I am somewhat familiar with CSS :hover, and Javascript rollovers, but I think CSS :hover only works with text, and I've only written JS rollovers with active page links. Can I somehow take the <a href > out of the JS command and have it work?

    Other Solutions?

  2. #2
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could have it set up so that the user rolls over a piece of text but the image it what changes.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Toronto, Ontario, Canada, Earth
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hello,

    i could be wrong, but i don't think there's a way to completely remove the link. however, you could do something like this:

    Code:
    <html>
    <head>
    <script language=JavaScript>
    function over() {
    document.images[0].src = "ul.gif";
    }
    function out() {
    document.images[0].src = "ur.gif";
    }
    </script>
    <body>
    <a href="JavaScript:over()" onmouseover="over();return true" onmouseout="out();return true">
    <IMG SRC="ur.gif">
    </a>
    </body>
    </html>
    this still has a link, but it doesn't go to another html page.

    Jason Weinstein
    webmaster@MaximumEdge.com
    http://www.MaximumEdge.com/
    Last edited by maximumedge; Jun 27, 2001 at 18:26.

  4. #4
    SitePoint Zealot abwebs's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, PA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could have it set up so that the user rolls over a piece of text ...
    The text would still require a link to another page?

    i could be wrong, but i don't think there's a way to completely remove the link...
    Tried it, still goes to another page if user clicks on it.

    Still searching for an alternative. Thanks for your input. Maybe I'll post this in Client Side Scripting category.
    Last edited by abwebs; Jun 28, 2001 at 04:53.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Toronto, Ontario, Canada, Earth
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by abwebs
    Tried it, still goes to another page if user clicks on it.
    the forum seems to have changed my code for some reason. try changing it so that 'java script' is just one word.

    Jason

  6. #6
    Procrastinator Extraordinaire lucas's Avatar
    Join Date
    Oct 2000
    Location
    Springfield, Missouri, U.S.A.
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could have it link back to the same page if you can't think of a way to do it without a link. or you could even have it link to an anchor thats located at the same area, so if the user clicks on it, nothing happens.

  7. #7
    SitePoint Zealot
    Join Date
    Apr 2001
    Location
    Toronto, Ontario, Canada, Earth
    Posts
    138
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by lucas
    you could have it link back to the same page if you can't think of a way to do it without a link. or you could even have it link to an anchor thats located at the same area, so if the user clicks on it, nothing happens.
    yes, you could do that, but a link to the same page would cause the page to reload and a link to an anchor would change the position of the page. it's better to link it to a javascript function that doesn't point to another page.

    Jason Weinstein
    webmaster@MaximumEdge.com
    http://www.MaximumEdge.com/

  8. #8
    SitePoint Zealot abwebs's Avatar
    Join Date
    Mar 2001
    Location
    Philadelphia, PA
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Exactly what I was trying to avoid - loading a page ! Thanks again for your help maximumedge! !
    <a href="java script: over()" onmouseover="over();return true" onmouseout="out();return true"> <IMG SRC="example.jpg"> </a>

    seems to work!

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you can't get that working then you could just leave it as a link but implement the "No refresh" link setup that Kevin Yank describes.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    SitePoint Guru
    Join Date
    Sep 1999
    Location
    Singapore
    Posts
    854
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try

    Code:
    <a href="javascript:;" ....>
    instead.

    That way you don't trigger any javascript clicking on the "link".

  11. #11
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    San Jose, California
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  12. #12
    :) delemtri's Avatar
    Join Date
    Jun 2001
    Posts
    579
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't you just put the onMouseOver in the &lt;img&gt; code?


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
  •