1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Hotspots in a CCS Style Sheer Background

Discussion in 'Software Development' started by ccrw471, Oct 20, 2003.

Thread Status:
Not open for further replies.
Advertisement
  1. ccrw471

    ccrw471 Thread Starter

    Joined:
    Oct 20, 2003
    Messages:
    5
    I am using CCS in order to have a background picture appear on the webpage that the CCS style is applied to.

    The problem I am having is how to have a hot-spot and associated link in that CCS embedded background graphic.

    Any input is appreciated.

    Chris
     
  2. khaki

    khaki

    Joined:
    Jul 26, 2003
    Messages:
    2,431
    hi Chris....

    background images and image maps are 2 seperate things.

    I have never seen anyone apply an image map to a background image.

    Hopefully someone here will tell me that I am wrong about this....
    but don't get your hopes up.

    sorry :(


    :) khaki
     
  3. khaki

    khaki

    Joined:
    Jul 26, 2003
    Messages:
    2,431
    oh.....
    but I believe that someone once used a transparent image OVER a background image (and they image mapped the transparent image).

    would you be interested in something like that???
     
  4. ccrw471

    ccrw471 Thread Starter

    Joined:
    Oct 20, 2003
    Messages:
    5
    The transparent image idea sounds interesting.

    Can you give me more information on how you would do it?

    Thank for you your help.

    Christopher Welber
    Technology Chief
    Tech Assure Technology Group, Inc.
    105 Washington Street, 4th Floor
    New York, NY 10006
    (212) 385-4719 Tel:
    (212) 385-4758 Fax:
     
  5. khaki

    khaki

    Joined:
    Jul 26, 2003
    Messages:
    2,431
    hi Chris.....

    how about something like this instead?

    (copy and paste into whatever you use to develop in.... view in a browser... and click the 3rd "Support" down on the left)

    <html>
    <head>
    <title>Untitled Document</title>
    <script type="text/javascript">
    function openWin()
    {
    window.open("http://forums.techguy.org/showthread.php?threadid=173376", "newWindow", "height=400, width=600, left=50, top=50, toolbar=yes, location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes")
    }
    </script>
    <style type="text/css">
    body {
    background: white url(http://forums.techguy.org/tsg/round/images/new_menu_logo2.gif);
    }
    </style>
    </head>

    <body>
    <div onclick="openWin()" style="position:absolute; left:80px; top:135px; height:40px; width:115px;"></div>
    </body>
    </html>
     
  6. ccrw471

    ccrw471 Thread Starter

    Joined:
    Oct 20, 2003
    Messages:
    5
    Thanks,

    I have been trying to solve the Hot-Spot CCS background issue for a while. I will keep you advised if it works, it was a good suggestions.

    Do you do much with CCS yourself?

    Chris
     
  7. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    btw, I think you mean CSS not CCS
     
  8. khaki

    khaki

    Joined:
    Jul 26, 2003
    Messages:
    2,431
    I know just enough to get myself into trouble.....
    but not enough to get myself out of it :rolleyes:

    (in other words..... you'd be wise to view my suggestions as on-the-fly hacks....
    and not as expert advice ;) )

    :)
     
  9. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    That's a good hack K, the only question is will it work in all browsers properly. Some may have javascript disabled...

    Another thing you could do is where K has the code
    Code:
    <div onclick="openWin()" style="position:absolute; left:80px; top:135px; height:40px; width:115px;"></div>
    Make a transparent 1x1pixel gif file called transparent.gif.

    And alter that code to read as:
    Code:
    <div style="position:absolute; left:80px; top:135px; height:40px; width:115px;">
      <a href="" target="_NEW_">
        <img src="transparent.gif" border="0" style="width:100%;height:100%;"/>
      </a>
    </div>
    That should work the same way, and should eliminate the need for the javascript...
     
  10. khaki

    khaki

    Joined:
    Jul 26, 2003
    Messages:
    2,431
    yes Gib..... that is a much better way to do that :)

    I used a window.open example strictly because I wanted to show that an event could be attached to it
    (since I wasn't sure what Chris had in mind for the hotspots).

    If it's effects that he is attaching to them..... javascript is probably going to be necessary.

    But if it's only navigation..... he should definietly use your method instead.

    (and Gibby.... you need to edit your post again.... cuz your horiz-scrolling us 800x600 folks :) )
     
  11. Gibble

    Gibble

    Joined:
    Oct 9, 2001
    Messages:
    27,087
    I really don't know how people use that resolution K...I mean...seriously, nothing fits on the screen with such a low resolution! I never drop below 1024x768 anymore UNLESS it's to test a pages layout in lower resolutions...
     
  12. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/173376

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice