Grow your CSS skills. Land your dream job.

Anyone got any ideas?

  • # September 15, 2008 at 3:45 pm

    This is a bit complicated to explain but the issue is with my client.
    I need rollover from an image that is about 100px wide and 20px tall. I need that when rolled over to expand to about 100px x 100px with a hotspot area in the rolled over image. Pain in the but I have found.

    I used a cool expanding Javascript. But doesn’t disappear when rolled off. You have to click on it to turn it off. Took me long enough to figure out how to do what I have right now.
    They don’t like that and they want it when rolled over, it expands and you can click on the hot spot on the rolled over state. Using CSS uses background images for rollovers so creating hotspots are nearly impossible.
    Then when you mouse OFF of it, it disappears instead of a click off click on state. They want it to disappear when moused off.

    Here is the site right now with the Javascript on it. Nit picky people I tell you. But any help on this Rollover with a Hotspot solution would be great. It is giving me a migraine.

    http://www.tonicmarketing.com/TestSites … index.html

    # September 15, 2008 at 5:24 pm

    where exactly on that page are you having this problem?

    My first idea was to rewrite the javascript with jquery. I had a similar situation where a pure js was not doing what i wanted it to do. I was able to rewrite the whole js (50 lines) into a jquery 5-liner….

    # September 15, 2008 at 5:42 pm

    You could use jquery for this. Check the jquery website. it’s not very hard to write such a thing in jquery.

    here is some code. I think this will do what you want.

    1. go to the jquery website. http://jquery.com/
    2. download the latest version of jquery.
    3. upload the file to your site
    4. Notice in the code below that there is a link in the head section of the file pointing to the jquery file
    5. to get your box to have the rounded corners, you will need to download the jquery.corner.js file. Just google it
    you should beable to find it easily
    6. if you can’t find the jquery.corner.js. then remove it from the code and everthing should be fine

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




    click

    Put your content here
    more content


    # September 16, 2008 at 11:23 am

    Sorry it is the Contact button down on the left bottom corner. It opens using the Accordian effect but they would like it to be rolled over and then the hotspot to be on the email address.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".