Image Preview On Select Option Elements Continuing from Image Popup on Mouseover

On 29th February 2008 Eggie asked for a script to show an image popup on mouseover for an select option element, what most people would recognise as a dropdown selection box.

The original post can be found at Image Popup on Mouseover

At the time, I wasn't actually interested in writing the code for it, but after seeing that it's the most viewed thread for the PHP forum here, I thought, why not write the script for it and get some of those viewers back here. It would probably be more suited in the Javascript section, so I thought I should add an element of PHP into the mix as well to PHPify it.

If I had access to Internet Explorer, I would have tested it, but right now I haven't got it so I've only tested it on Firefox 3.5.6 on Ubuntu 9.10 so if anyone can verify if it works with IE, it would be much appreciated.

The languages/libraries involved:

XHTML 1.1
Javascript/JQuery 1.3.2
CSS 2.1
PHP 5.3.1

To view the demo see this Image Preview on Select Option Element

The images would be found in This Location

I will later talk more about it, and explain any questions or concerns people may have or even more ideas if you would like... just I can't do it now, I'm being told to hurry up to get ready for the New Years Party so I will return later.


Cheers,


MC

I just tried to use the Demo with Opera, it doesn't work or it's just me? I can't see any preview of the image by changing an option in the select list or by pushing Register button, even though the source seems to be ok on the first view? The same is with IE8, I don't have Firefox on my computer at work to test if it's not my problem..Any ideas?

With firefox I also don't see the preview images.

Very strange indeed.As long as you don't block Google's JSAPI location, or block any Javascript to me it should work but I have not tested it on other Browsers or Operating Systems. What I've done in my code should not be OS specific though, and it should be compatible with most browsers but I may have to look into that.What Operating Systems and versions of the Browsers are you using?The register button does nothing at the moment, the preview images are on mouseover on the bikes when you hover over them, there's only 2 while the rest are just commented out as it's only for demonstration purposes, plus I don't have pictures of those bikes yet.I will try a few more different browsers out and when I get behind a Windows computer I will give IE a try.When you say you don't see the preview images, is the box showing with a broken image link? or just the name, etc?I may need to preload the images, but I thought due to them being around 6-11KB it wouldn't be necessary.Give me a few minutes to investigate, if this isn't going to work, I may have to try other methods which I came up with, just this seemed the simplest to do.Cheers,MC

What Operating Systems and versions of the Browsers are you using?

I will run some unit tests on Opera 10.10 to see what it can and can't do. In the meantime, I'll show another method that should work but... it's not going to be a select option drop down, but something that will resemble and work just like one.Give me a few minutes to post a demo up for it and see if you notice anything different.Cheers,MC

I'm using Opera 10.10 on Windows 7When I go directly to google jsapi, it opens me the code, so it doesn't seem to be blocked?I just tried to open it with Google Chrome, the same, I even turned off ad blockers, strange though if it works for you..

I was meant to come back to this post ages ago, forgot all about it.

My new test demo is at: Test Demo 2

Now I've had reports of some strange activity in IE though I'm not sure what they are as I don't have IE to test.

Hopefully this works better for Firefox and Opera now.

The whole idea was to create something that looks like a dropdown menu using an unordered list.


Cheers,


MC

Hi mastercomputers, I just googled for something like this and stumbled upon your topic. Is there any chance you will be releasing the code? I was looking for something like this for a component im writing for my website.

Hi Marked,Well, the code is basically everything in the source page. It's just XHTML, CSS and Javascript (jquery) combined with a few images for styling the dropdown and displaying in the preview. I didn't implement the form like submit for it but that's not hard at all.If there is a lot of interest in this, I may create something more flexible that should be able to fit most peoples needs as this was rather just a proof of concept to show it would be possible. Right now, I'm quite busy on other projects so if you do have problems, just leave a message and I'll try to help when I can.Things that would improve this is pre-loading images, liquid styling, degrading nicely when Javascript isn't available. Maybe can clean up the code even better so less elements are used, majority of the elements were just for styling so it'd look like a dropdown.Cheers,MC

Just now, I saw that the new test demo 2 is available, it works for me well, very good feature to embed in any site where you need to choose something.

Image Popup on MouseoverImage Preview On Select Option Elements

First Download jquery.Js and menu.Js and then

<title>Image Preview with jQuery</title><meta name="description" content="Easiest jQuery Tooltip Ever"><script src="jquery.Js" type="text/javascript"></script><script src="main.Js" type="text/javascript"></script></meta><style>Body {    margin:0;    padding:40px;    background:#fff;    font:80% Arial, Helvetica, sans-serif;    color:#555;    line-height:180%;}h1{    font-size:180%;    font-weight:normal;    color:#555;}H2{    clear:both;    font-size:160%;    font-weight:normal;    color:#555;    margin:0;    padding:.5em 0;}A{    text-decoration:none;    color:#f30;    }P{    clear:both;    margin:0;    padding:.5em 0;}Pre{    display:block;    font:100% "Courier New", Courier, monospace;    padding:10px;    border:1px solid #bae2f0;    background:#e3f4f9;        margin:.5em 0;    overflow:auto;    width:800px;}img{border:none;}Ul,li{    margin:0;    padding:0;}Li{    list-style:none;    float:left;    display:inline;    margin-right:10px;}/*  */#preview{    position:absolute;    border:1px solid #ccc;    background:#333;    padding:5px;    display:none;    color:#fff;    }/*  */</style></head><body>    <h1> </h1>        <h2> </h2>    <ul>	    <li><a href="image_football006.Jpg" class="preview"><img src="image_football007.Jpg" alt="gallery thumbnail" width="73" height="74" /></a></li>	    <li><a href="1.Jpg" class="preview"><img src="1.Jpg" alt="gallery thumbnail" width="73" height="74" /></a></li>    </ul>    <h2> </h2>    <ul>	    <li><a href="image_football006.Jpg" class="preview" title=""></a></li>	        </ul>