Professional Web Applications Themes

image preview on mouseover - HTML & CSS

The only way I know to fully explain what I'm trying to do is to show you, please go to either - [url]http://www.istockphoto.com/file_search.php?action=file&text=house[/url] or - [url]http://www.templatemonster.com/[/url] When you mouseover an image, a larger image appears as a preview. I have searched for ways to do this, but I just can not seem to get it to work. I found one forum that said to use a javascript file (filesearchhover.js) and use a "showtrail" code with the mouseover. I still could not get this to work. Any help would be greatly appreciated....

  1. #1

    Default image preview on mouseover

    The only way I know to fully explain what I'm trying to do is to show you,
    please go to either
    - [url]http://www.istockphoto.com/file_search.php?action=file&text=house[/url]
    or
    - [url]http://www.templatemonster.com/[/url]

    When you mouseover an image, a larger image appears as a preview. I have
    searched for ways to do this, but I just can not seem to get it to work. I
    found one forum that said to use a javascript file (filesearchhover.js) and use
    a "showtrail" code with the mouseover. I still could not get this to work.

    Any help would be greatly appreciated.

    trebor123 Guest

  2. #2

    Default Re: image preview on mouseover

    Google "overlib". That'd be one way.

    Another would be to put a layer on the page, put your enlarged image in the
    layer, hide the layer, and make your mouseover show it and your mouseout
    hide it using DW behaviors.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "trebor123" <webforumsusermacromedia.com> wrote in message
    news:egjh2n$3n1$1forums.macromedia.com...
    > The only way I know to fully explain what I'm trying to do is to show you,
    > please go to either
    > - [url]http://www.istockphoto.com/file_search.php?action=file&text=house[/url]
    > or
    > - [url]http://www.templatemonster.com/[/url]
    >
    > When you mouseover an image, a larger image appears as a preview. I have
    > searched for ways to do this, but I just can not seem to get it to work.
    > I
    > found one forum that said to use a javascript file (filesearchhover.js)
    > and use
    > a "showtrail" code with the mouseover. I still could not get this to
    > work.
    >
    > Any help would be greatly appreciated.
    >

    Murray *ACE* Guest

  3. #3

    Default Re: image preview on mouseover

    Murray,

    I have no idea what an "overlib" is. I can look into it though.

    If I used layers in DW, would that attach the layer to the pointer? I like
    that cause it is very neat and the user does not have to look all over the page
    to see/find the enlarged picture.

    Thanks

    trebor123 Guest

  4. #4

    Default Re: image preview on mouseover

    > I have no idea what an "overlib" is.

    It's an addon that will do exactly what you see on the sites you linked.
    > If I used layers in DW, would that attach the layer to the pointer?
    No.
    > I like
    > that cause it is very neat and the user does not have to look all over the
    > page
    > to see/find the enlarged picture.
    I hate both methods because they give you an enormously heavy page which
    fetches images from the server that you may never look at....

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "trebor123" <webforumsusermacromedia.com> wrote in message
    news:eglcqb$bgh$1forums.macromedia.com...
    > Murray,
    >
    > I have no idea what an "overlib" is. I can look into it though.
    >
    > If I used layers in DW, would that attach the layer to the pointer? I
    > like
    > that cause it is very neat and the user does not have to look all over the
    > page
    > to see/find the enlarged picture.
    >
    > Thanks
    >

    Murray *ACE* Guest

  5. #5

    Default Re: image preview on mouseover

    Good point. That would make for a heavy page. I was hoping for something that would avoid pop-ups, seeing as some people block them.

    Any suggestions?

    Thanks
    trebor123 Guest

  6. #6

    Default Re: image preview on mouseover

    > I was hoping for something that would avoid pop-ups

    None of these methods rely on pop-ups.

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "trebor123" <webforumsusermacromedia.com> wrote in message
    news:egmp7s$5ck$1forums.macromedia.com...
    > Good point. That would make for a heavy page. I was hoping for something
    > that would avoid pop-ups, seeing as some people block them.
    >
    > Any suggestions?
    >
    > Thanks

    Murray *ACE* Guest

  7. #7

    Default Re: image preview on mouseover

    I think you should look at examples such as:
    [url]http://www.huddletogether.com/projects/lightbox/[/url]
    This uses modal windows but playing with the code might give you an idea of
    how you can adopt it to work so it shows when the mouse goes over an image.

    Hope that helps!

    DonJuanDon Guest

  8. #8

    Default Re: image preview on mouseover

    CSS a:hover / span can create similar effects. For basics see Eric Meyers CSS
    [url]http://meyerweb.com/eric/css//edge/popups/demo.html[/url] and Dynaimic Drive's
    [url]http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb[/url]
    The parent element (usually anchor a:link, a:hover) is CSS position:RELATIVE
    so display:none / display:block child hover/span can be positioned ABSOLUTE in
    relation to parent element. I use this basic methodology on my navigation
    buttons -- e.g., [url]http://artdemo.tripod.com[/url] or [url]http://www.auntnini.com[/url] -- for
    short hover notations.

    auntnini Guest

  9. #9

    Default Re: image preview on mouseover

    Nice....

    --
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    [url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
    [url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
    [url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
    ==================


    "auntnini" <webforumsusermacromedia.com> wrote in message
    news:egrjrn$smr$1forums.macromedia.com...
    > CSS a:hover / span can create similar effects. For basics see Eric Meyers
    > CSS
    > [url]http://meyerweb.com/eric/css//edge/popups/demo.html[/url] and Dynaimic Drive's
    > [url]http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb[/url]
    > The parent element (usually anchor a:link, a:hover) is CSS
    > position:RELATIVE
    > so display:none / display:block child hover/span can be positioned
    > ABSOLUTE in
    > relation to parent element. I use this basic methodology on my navigation
    > buttons -- e.g., [url]http://artdemo.tripod.com[/url] or [url]http://www.auntnini.com[/url] --
    > for
    > short hover notations.
    >

    Murray *ACE* Guest

Similar Threads

  1. scroll single image on mouseover?
    By mlcv in forum Macromedia Exchange Dreamweaver Extensions
    Replies: 4
    Last Post: November 11th, 11:28 PM
  2. Color Picker mouseover preview
    By kris_s in forum Macromedia Flex General Discussion
    Replies: 2
    Last Post: May 27th, 11:07 PM
  3. image on mouseover close on mouseout
    By don Carlos in forum Macromedia Dynamic HTML
    Replies: 1
    Last Post: August 22nd, 08:45 PM
  4. Mouseover changes another image
    By scottastrophik in forum Macromedia Dynamic HTML
    Replies: 3
    Last Post: June 15th, 03:33 PM
  5. Changing an image on mouseover?
    By hufingraz webforumsuser@macromedia.com in forum Macromedia Flash Sitedesign
    Replies: 0
    Last Post: February 6th, 08:08 PM

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
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139