Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 14
  1. #1
    kb1
    kb1 is offline
    Senior Member
    Join Date
    May 2006
    Posts
    115
    Member #
    13296
    Hi

    Been trying to do this (mouseOver the LAVAlamp image)

    http://www.istockphoto.com/file_sear...cs_tolerance=1

    But get this instead... (mouseOver "71 Countries")

    http://www.enhancedwireless.net/Technology/test.shtml

    So what's wrong - what should I tweak?

    Thanks
    KB

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,694
    Member #
    5580
    Liked
    717 times
    They're using some sort of Javascripting to pop up that image.
    You need to find a simple mouseover Javascript that can do the same thing.

    Something like this perhaps: http://www.bosrup.com/web/overlib/

    Instead of popping up text boxes, it could be a customized box with a full-size photo.

    Other than that ....

    This paragraph -- the part in RED...

    Patent applications have been filed around the world <a href="../images/PatentsMap.png" class="screen">(71 countries)</a><b><img src="PatentsMap.png" alt="Patents Map" title="Patents Map" /></b> and registered patent protection relating to the ODMA technology is presently available in 48 countries. Patents have been granted in the United States and in Europe, as well as in numerous other countries worldwide covering every continent.<br />

    is not the correct path to your image, but then again, I'm not sure if you want
    the image to appear ... not sure what you're doing there.


  4. #3
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Or to look cool, use lightboxes, or another script of its kind. It basically pops up a box, but totally in HTML and JS (no real new browser window involved).
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  5. #4
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    I think that the problem is this...
    [minicode]<a href="../images/PatentsMap.png" class="screen">(71 countries)</a><b><img src="PatentsMap.png" alt="Patents Map" title="Patents Map" /></b>[/minicode]

    In your stylesheet, you have...
    Code:
    a.screen b {
    position:absolute;
    visibility:hidden; /* hide the image */
    width:360px; /* give it a width */
    height:0; /* no height to solve an Opera bug that 
                 makes it selectable when hidden */
    border:1px solid #000; /* add a border */
    left:0; /* position:the image */
    top:-150px;
    }
    a.screen:hover {
    text-decoration:none; 
    border:0; /* needed for this to work in IE */ 
    z-index:1000;
    }
    a.screen:hover b {
    visibility:visible; /* make the image visible */
    height:270px; /* now give it a height */
    cursor:pointer; /* for IE */
    z-index:500; 
    }
    a.screen:hover b img {
    border:0; /* remove the link border */
    }
    .. All your [minicode]a.screen b[/minicode],[minicode]a.screen:hover b[/minicode], etc is requiring that the <b> tag be nested inside of the <a> tag, but you have the <b> tag just right alongside the <a> tag. Try this instead...

    [minicode]<a href="../images/PatentsMap.png" class="screen">(71 countries)<b><img src="PatentsMap.png" alt="Patents Map" title="Patents Map" /></b></a>[/minicode]
    choosy developers choose gif!
    website | paintings | blog

  6. #5
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    www.dynamicdrive.com has the perfect thing for this, in the image section

  7. #6
    kb1
    kb1 is offline
    Senior Member
    Join Date
    May 2006
    Posts
    115
    Member #
    13296
    I want to thank everyone fo the very helpful replies! I thought I would receive the replies automatically which is why I've only now checked and discovered all these answers...

    I tried raspberry's suggestion - very nice it did get rid of the broken icon image but now I've got a "?" and a border frame when I rollover the (71 countries). Have a look at

    http://www.enhancedwireless.net/Technology/test.shtml

    Probably just a tweak but I'm not sure what it is.

    Anyone?

    Thanks

  8. #7
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    You left out the "../images/" in your img src...

    Change
    HTML Code:
    <a href="../images/PatentsMap.png" class="screen">(71 countries)<b><img src="PatentsMap.png" alt="Patents Map" title="Patents Map" /></b></a>
    to

    HTML Code:
    <a href="../images/PatentsMap.png" class="screen">(71 countries)<b><img src="../images/PatentsMap.png" alt="Patents Map" title="Patents Map" /></b></a>
    choosy developers choose gif!
    website | paintings | blog

  9. #8
    kb1
    kb1 is offline
    Senior Member
    Join Date
    May 2006
    Posts
    115
    Member #
    13296
    Thanks so much - it works now on FF, Opera and Netscape (all on my mac), but not on my Apple Safari 1.3.2 - wonder if there's a fix for Safari? I can see I need to reduce the image size as well.

    Do you know if I could have a swf file pop up instead of an image?

    Thanks again!

    KB

  10. #9
    Senior Member raspberryh's Avatar
    Join Date
    Aug 2004
    Location
    Erie, PA
    Posts
    882
    Member #
    7208
    Liked
    1 times
    Glad I could help! I think it's SOOO cool that you're using css for the rollover instead of javascript!

    I think you can use a swf file instead of an image. Try putting an object tag in place of the image tag, like this:

    HTML Code:
    <a href="../images/PatentsMap.png" class="screen">(71 countries)<b><object ....></object></b></a>
    ...but, I'm not sure that it will be valid html, with the object tag nested within the <a> tag...

    About the Safari problem, I'm not really sure, I can try to check it out when I get to work tomorrow (I have a PC at home and a Mac at work).

    Heather
    choosy developers choose gif!
    website | paintings | blog

  11. #10
    kb1
    kb1 is offline
    Senior Member
    Join Date
    May 2006
    Posts
    115
    Member #
    13296
    well, I tried it and DW 8 automatically asked if I wanted it to add the active thingy, so I said yes - but unfortunately either way the swf doesn't work on any of my browsers on mac - FF, Safari, Opera, Netscape.

    I just get a black border and it is positioned differently on each browser - I'd like the swf to play as hover over the (71 countries) text, positioned just above this link.

    Any thoughts? I know I need to alter the css and maybe the swf javascript but don't know how - in fact is the DW 8 automatic include of the active/js conflicting with my css?

    BTW - the original css I got from
    http://www.cssplay.co.uk/menu/pop_ups.html#nogo

    Would like my version to work as well.

    http://www.enhancedwireless.net/Technology/test.shtml

    Thanks much

    KB


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:39 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com