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.

Results 1 to 10 of 10

Thread: image pop ups

  1. #1
    Member
    Join Date
    Sep 2005
    Posts
    52
    Member #
    11496
    I don't know how to ask for this so I am going to use a example. What I want to do is have a list of items. When you hover over the item it does a pop up of a picture. Just like a alt tag would be to text. Instead of text I want to use a image instead.

  2.  

  3. #2
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    <a href="javascript: onMouseOver="window.open('images/picture.jpg')">
    Shani

    I have an eye for detail like you'd never believe.

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    I actually love what they do on istockphoto.com .... if you sign up (which is free) and do a search and check out the nice pop-up on the images.

    I just checked the source and it's a javascript (http://www.istockphoto.com//js/filesearchhover.js) and the html for the image is like

    Code:
    <img class="searchImg" width="110" height="73" alt="Fishing boat"
    src="http://www1.istockphoto.com/file_thumbview_approve/378299/1/istockphoto_378299_fishing_boat.jpg"
    onmouseover="showtrail('http://www1.istockphoto.com/file_thumbview_approve/378299/2/istockphoto_378299_fishing_boat.jpg',
    'Fishing boat','','5.0000','1',	'1',180);" onmouseout="hidetrail();" />
    hmmm.... I'm gonna have to try this out.
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    DCScene.. u sure that code is correct?

    Code:
    <a href="javascript: onMouseOver="window.open('images/picture.jpg')"> 
    not..
    <a href="#"  onMouseOver="javascript:window.open('images/picture.jpg')"> link</a>
    the site that karinne gave is really cool because the popups dont get blocked..
    and you dont have to click them to close..

    Netflicks is another good example of what you want to do..
    http://www.netflix.com/BrowseSelection?lnkctr=nmhbs

  6. #5
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Okay, igeek, you're right, but not right at the same time. Looking at what I wrote earlier, I see that it is wrong, but the option you put in, doesn't work: that covers my first sentence. (Thirty minutes later.)

    Now back to the issue. I have done pop-ups in two ways, one was a script a friend gave me and it looks something like this:
    HTML Code:
    <a href="javascript:void(0)" onMouseOver="window.open('images/picture.jpg')">link</a>
    if you put a 1 where the 0 is, it still works, but I am not sure of the widespread ramifications. I don't know what the "void" does, but I have never had a problem with it.
    Also, a simple modification on igeek's code will also work:
    HTML Code:
    <a href="#" onMouseOver="window.open('images/picture.jpg')">link</a>
    The part a href="#" really only makes the browser open it in the same window and go back to the top. I avoid using a href="#" because it causes a jump.

    Another way to do it is to set up a function, and then call it as needed. Both the sites igeek and karinne refer to have done that. I am sure there are more ways, and better ways, but this just seems like the most obvious/accessible way.
    Shani

    I have an eye for detail like you'd never believe.

  7. #6
    Member
    Join Date
    Sep 2005
    Posts
    52
    Member #
    11496
    I tried both and having issues.

    site is
    http://www.hoosiernerd.com/ericsoft/.../Amenities.asp

    If you hover over the code a new window appears. Can I make it to where you hover over a little pop up occurs and when you hover off it goes awa.

    What about a CSS way is it possible using the Alt tag

  8. #7
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Hi Eric,

    Where do you want this hover to be? And how do you want it to work? There is a pretty straightforward way of using javascript to reveal a hidden div. Here's the logic:

    1- in your CSS create the divs, each as an ID. For the sake of ease, use the same nomeclature with some sort of progression
    2- once you have the divs properly positioned, add this attribute: visibility:hidden;
    3- in the javascript file, create a function that will change the CSS. Leave room for no less than three attributes: (theDiv, theCSSattribute, theCSSattributeValue).
    4- in the javascript file, create a function that will change the value off all of your divs back to hidden. (copy/paste) *this is the part where it will make everything return to normal*
    5- in your HTML call the function in number 4, I name it something like ReSet, then call function number three setting the specifics accordingly.
    6- (optional) depending on what your needs are, if you need it to disappear, repeat the function in number 4 onMouseOut

    Next, not related to this question, but the address is being wrapped in a very odd way. I think it would look better divvied on more lines.
    Shani

    I have an eye for detail like you'd never believe.

  9. #8
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Okay, I'm back, it's been a whole five minutes!

    So, this time I was able to locate where you are using the pop-up. Ah those pop-up blockers! The good news is by using the hidden div method described above, pop-up blockers will not confuse people like me. And it will get the completely unsavvy user out of the dark!

    Suggestion Utilize the spot on the right of the list to position the image. Why? It will become part of the layout, there is room for it, and you will not be required to add the "return to normal" (above, line 6).

    Okay, so I have done something similar to this before. The script itself is a little heavy so even on broadband, there is a slight delay. My example works onClick, but that's an easy change.

    Check out the Varieties (if nothing happens scroll down).
    And here's the javascript file.
    Shani

    I have an eye for detail like you'd never believe.

  10. #9
    Senior Member igeek's Avatar
    Join Date
    Oct 2005
    Posts
    202
    Member #
    11644
    here is a good tutorial for some popups that use only css.. By Eric Meyer
    If you dont want to use javascript this might work for you to..
    you could position the DIV where you want the images to appear and show different images..

    http://www.meyerweb.com/eric/css/edge/popups/demo.html
    http://www.meyerweb.com/eric/css/edge/popups/demo2.html

  11. #10
    Senior Member Shani's Avatar
    Join Date
    Nov 2004
    Posts
    1,140
    Member #
    8171
    Bravo igeek! Excellent find.
    Shani

    I have an eye for detail like you'd never believe.


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
  •  

Search tags for this page

website design pop up pictures pop up

Click on a term to search for related topics.
All times are GMT -6. The time now is 04:05 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com