8 Replies Latest reply on Apr 9, 2010 7:19 AM by sigh420

    text as a hotspot?

    sigh420

      Hello, is there any way to make hotspot from text instead of an image?

       

      for example....I have names of our products that we sell, what I want is when the user does a mouse over on the text item, I want the image of the product to appear beside it. All I have seen on the net is using an image as a hotspot and not text.

       

      Any help would be much appreciated thanks.

       

      Mark

        • 1. Re: text as a hotspot?
          370H55V Level 4

          There's a script for this called overlap viewer.

           

          An example of how it works is on one of my clients' sites here.

           

          Overlap viewer works with text or pictures as the "hotspot" or link.

          • 2. Re: text as a hotspot?
            sigh420 Level 1

            Thanks for your reply, this is closer to what I need to do, but is there a way so that the image does not appear over the text like it does in the script? I kind of want it to appear beside the text in its own div tag I already made for it.

            • 3. Re: text as a hotspot?
              370H55V Level 4

              For that you want a disjointed rollover

              Nancy O. has some terrific links to info on them.

               

              http://alt-web.com/DEMOS/CSS-Disjointed-Menu-Rollover.shtml

               

              and

               

              http://alt-web.com/DEMOS/CSS-Disjointed-Text-Rollover.shtml

               

              If those work, thank her not me, I'm just passing them along.

              1 person found this helpful
              • 4. Re: text as a hotspot?
                sigh420 Level 1

                Thanks again, this is more of what I was looking for. I will give this a try.

                • 5. Re: text as a hotspot?
                  sigh420 Level 1

                  Well after tinkering a bit, it worked

                   

                  now the question I have is do I have to make a new css rule (navlist) for each category section of the products I want to showcase, or can I apply the same rules just with different images? Hope I explained that right

                  • 6. Re: text as a hotspot?
                    Nancy OShea Adobe Community Professional & MVP

                    do I have to make a new css rule (navlist) for each category?  

                     

                    No.  Just change the #rollover ID to a class name (.rollover).   You can resuse class names as many times as needed per page.  IDs can be used only 1 time per page.

                     

                    Try this code and see if it works a little better for you.

                     

                     

                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml">
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                    <title>Untitled Document</title>
                    <style type="text/css">
                    .rollover a {position:relative}
                    
                    .rollover li a {text-decoration:none;}
                    
                    .rollover li a span {
                    visibility:hidden;
                    display:block;
                    position:absolute;
                    /**adjust disjointed text position in % or px**/
                    left:100px;
                    top:-10px;
                    color:#666;
                    background-color:#CCCCCC;
                    border: 2px solid silver;
                    padding: 5px;
                    text-align: center;
                    font-style: italic;
                    }
                    
                    .rollover li a:hover span, .rollover li a:active span, .rollover li a:focus span {
                    visibility:visible;
                    height: 8em; /**size of images**/
                    width: 8em; /**size of images**/
                    }
                    
                    .rollover li a:hover, .rollover li a:focus{
                    text-decoration: none;
                    color:#FF6600;
                    visibility:visible; }
                    </style>
                    </head>
                    
                    <body>
                    <ul class="rollover">
                    <li><a href="#">Link Item 1<span>Image 1<br />
                    caption</span></a></li>
                    <li><a href="#">Link Item 2<span>Image 2<br />
                    caption</span></a></li>
                    <li><a href="#">Link Item 3<span>Image 3<br />
                    caption</span></a></li>
                    <li><a href="#">Link Item 4<span>Image 4<br />
                    caption</span></a></li>
                    </ul>
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed orci odio, scelerisque vitae dictum sed, consectetur vitae sapien. Vivamus porttitor ligula non lorem faucibus rhoncus. Duis vestibulum, justo id vestibulum semper, ipsum lacus adipiscing risus, id elementum mauris lacus sit amet sem. Fusce nunc odio, congue feugiat vehicula a, venenatis ac ipsum. In luctus velit eu neque blandit quis suscipit odio ullamcorper. Quisque et turpis libero, sed ullamcorper neque. Sed nec ipsum in metus euismod sollicitudin vitae nec odio. Sed ut tortor nisi! Nulla facilisis ipsum a dolor sagittis mollis pulvinar nisl consectetur! Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                    
                    <ul class="rollover">
                    <li><a href="#">Link Item 5<span>Image 5<br />
                    caption</span></a></li>
                    <li><a href="#">Link Item 6<span>Image 6<br />
                    caption</span></a></li>
                    <li><a href="#">Link Item 7<span>Image 7<br />
                    caption</span></a></li>
                    <li><a href="#">Link Item 8<span>Image 8<br />
                    caption</span></a></li>
                    </ul>
                    
                    </body>
                    </html>
                    
                    
                    

                     

                     

                    Nancy O.
                    Alt-Web Design & Publishing
                    Web | Graphics | Print | Media  Specialists
                    http://alt-web.com/
                    http://twitter.com/altweb
                    http://alt-web.blogspot.com

                    • 7. Re: text as a hotspot?
                      370H55V Level 4

                      Thanks, Nancy.

                       

                      You're far more "well versed" in DJR than I.

                       

                      I have yet to find a good spot to incorporate it in a page/site.

                       

                      I'm too busy learning Flash and Action script right now to be messing with too much other stuff.

                      • 8. Re: text as a hotspot?
                        sigh420 Level 1

                        Thank you Nancy and Mac, I have a lot to learn when it comes to making the code clean and optimised, I have discovered another problem I am having,

                         

                        It all works fine until I adjust the window size of my browser. It seems the rollover image follows the size of the browser window, What can be done to make the rollover image stay stationary?

                         

                        Mark