Do you know a website where an option selection list shows you a popup or lightbox of each option onMouseover or onSelect?
Asked by
ETpro (
34605
)
January 19th, 2012
I’d like to find an example of a website, probably an online store, where selecting or mousing over a drop-down selection list or clicking one of the selections shows you an image of what that option looks like. Let’s say color, finish, size, etc.
I’m going to have to use JavaScript of jQuery to do this, and I’m having a bit of a time finding an event handler that passes the selected value to a script instead of passing the default selection. I’d like to find an example of a site that’s done this, and see how they managed it.
Observing members:
0
Composing members:
0
5 Answers
Can’t you invoke a Javascript function with onmouseover and onmouseout?
When the onMouseover event fires, it passes the first item in the select list or the one that has the selectecd value preset. It doesn’t feed back which option the mouse is over. It does that regardless of which ipotion it passes over.
@ETpro – Give me a few days or a weekend to try a few things and I’ll see if I can throw some Javascript code together…
I have something thrown together. It’s not exactly what you want. I couldn’t get it to work with a dropdown list, but it works with a list of radio buttons with unique Values within the same Name group. When you hover over one of the three buttons, the page displays one of three different images (a different image for each button/Value). It’s not highly polished code, and Fluther’s editor uglified it even further, but it shows you a technique that works. Let me know if you want me to email you a ZIP file with the code and images:
<!—Do you know a website where an option selection list shows —>
<!—you a popup or lightbox of each option onMouseover or onSelect? —>
<!— —>
<!—I’d like to find an example of a website, probably an online store, —>
<!—where selecting or mousing over a drop-down selection list or clicking —>
<!—one of the selections shows you an image of what that option looks like. —>
<!—Let’s say color, finish, size, etc. —>
<!— —>
<!—I’m going to have to use JavaScript of jQuery to do this, and I’m having —>
<!—a bit of a time finding an event handler that passes the selected value —>
<!—to a script instead of passing the default selection. I’d like to find —>
<!—an example of a site that’s done this, and see how they managed it. —>
<HTML>
<HEAD>
<TITLE>selection mouseover test – test page</TITLE>
</HEAD>
<BODY BGCOLOR=“BLUE” LINK=“YELLOW” ALINK=“RED” VLINK=“YELLOW”>
<FONT FACE=“ARIAL, HELVETICA, VERDANA, TAHOMA, TREBUCHET” SIZE=“2” COLOR=“WHITE”>
<P>
Which slave do you want to play with?
</P>
<UL>
<LI>
<DIV STYLE=“TEXT-DECORATION:NONE” BORDER=“0”
ONMOUSEOVER=“document.slave.src=‘dartboard-fuschia.jpg’;”
ONMOUSEOUT=“document.slave.src=‘transparent.gif’;”>
<INPUT TYPE=“radio” NAME=“slave” VALUE=“fuschia”>
Fuschia
</INPUT>
</DIV>
</LI>
<LI>
<DIV STYLE=“TEXT-DECORATION:NONE” BORDER=“0”
ONMOUSEOVER=“document.slave.src=‘dartboard-mindy.jpg’;”
ONMOUSEOUT=“document.slave.src=‘transparent.gif’;”>
<INPUT TYPE=“radio” NAME=“slave” VALUE=“mindy”>
Mindy
</INPUT>
</DIV>
</LI>
<LI>
<DIV STYLE=“TEXT-DECORATION:NONE” BORDER=“0”
ONMOUSEOVER=“document.slave.src=‘dartboard-sue.jpg’;”
ONMOUSEOUT=“document.slave.src=‘transparent.gif’;”>
<INPUT TYPE=“radio” NAME=“slave” VALUE=“sue”>
Sue
</INPUT>
</DIV>
</LI>
</OL>
<IMG SRC=“transparent.gif” NAME=“slave” BORDER=“0” WIDTH=“300” HEIGHT=“200”>
</FONT>
</BODY>
</HTML>
Answer this question 
This question is in the General Section. Responses must be helpful and on-topic.
Composing members:
0
