SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast dyrer's Avatar
    Join Date
    Sep 2005
    Location
    Greece
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Pops link over an image

    Hello
    I want to make a map and with alert window and link when hover link over certain areas
    How can i do it?
    Thanks in advance

  2. #2
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I imagine that the best way to do this would be to slice the image up and display it in a table format or something like this. There are ways to use hover effects to display a <span> that has been previously hidden.

    I actually used the code in a project yesterday. I can provide if you want it. Mention or quote me or pm me to get my attention (I'm not in this forum a lot).

    ~TehYoyo

  3. #3
    SitePoint Enthusiast dyrer's Avatar
    Join Date
    Sep 2005
    Location
    Greece
    Posts
    41
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I imagine that the best way to do this would be to slice the image up and display it in a table format or something like this. There are ways to use hover effects to display a <span> that has been previously hidden.

    I actually used the code in a project yesterday. I can provide if you want it. Mention or quote me or pm me to get my attention (I'm not in this forum a lot).

    ~TehYoyo
    Yes of course if you want to share your code
    Thanks a lot

  4. #4
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Sure. I'll post when I get home - don't have it right here. It's really pretty simple, at first setting a span to display:none; and then changing it on hover.

    ~TehYoyo

  5. #5
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    @dyrer ;

    Right. I've got it. Like I explained above, you essentially display:none; the span and then have it show on hover.

    HTML:
    Code:
    <a href="#" class="onhover"><img src="blahblah.jpg" alt="a blah blah blah" /><span>Check out this cool picture and cool hover effect!</span></a>
    CSS:
    Code:
    a.onhover span {display:none;}
    
    a.onhover:hover span	{display:block;
    				 position:absolute;
    				 top:2em;
    				 left:2em;
    				 width:15em;
    				 border:1px solid #050505;
    				 background-color:#8C264D;
    				 color:#FF7C1D;
    				 text-decoration:none;
    				 }
    You can change all of the other stuff, just make sure you have a width, the display:block, and something inside the span for it to work.

    Again, not my code. If you made this (specific piece of code), let me know, or just post!

    I can explain exactly what everything does if you wish.

    ~TehYoyo

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,177
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    I imagine that the best way to do this would be to slice the image up and display it in a table format or something like this.
    A CSS image map might be a better solution. There are links to various tutorials here.

    Quote Originally Posted by TehYoyo View Post
    There are ways to use hover effects to display a <span> that has been previously hidden.
    You need to remember that "hover" won't work on some mobile and/or touchscreen devices. It also requires the use of a mouse, so it excludes anybody navigating via a keyboard. I believe you can use focus to make it accessible to keyboarders. Not all the image maps in the above link are keyboard-accessible, although the first one is. (I didn't test them all.)

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    You need to remember that "hover" won't work on some mobile and/or touchscreen devices. It also requires the use of a mouse, so it excludes anybody navigating via a keyboard. I believe you can use focus to make it accessible to keyboarders. Not all the image maps in the above link are keyboard-accessible, although the first one is. (I didn't test them all.)
    Yeah. You'd need to balance what you want. Even though you can use focus to help people with touchscreens and keyboard navigation, most people don't click when there's a hover effect. The best way would be to include both:

    Code:
    a.onhover:hover span, a.onhover:focus span
    ~TehYoyo

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't use display:none/block. That's a poor technique and outdated.

    A better method which has been shown to be more accessible, is (make it position;absolute of course, coordinates etc) to hide it via a huge negative left margin, and upon hover, or focus, bring it back in .

    It also avoids an IE7 bug.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,177
    Mentioned
    264 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by TehYoyo View Post
    Even though you can use focus to help people with touchscreens and keyboard navigation...
    I don't know how much focus helps with touchscreens - you'd need a method of tabbing through the links, which not all touchscreens have.

  10. #10
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by TechnoBear View Post
    I don't know how much focus helps with touchscreens - you'd need a method of tabbing through the links, which not all touchscreens have.
    Well it gives them some interactivity potential - although usually when I use a touchscreen I don't expect much interactivity - this might be a good thing.

    If you hooked it up with a cool animation transition (CSS3), it would be a really nice site.

    ~TehYoyo


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
  •