Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.
How to make a drop down list in java script or Html/ php that comes off a image
How do i write the code for a drop down menu list off a image
Who is Participating?
java script :
<FORM name="guideform">
<SELECT name="guidelinks">
<OPTION SELECTED value="jex6.htm">Page 1
<OPTION value="jex7.htm">My Cool Page
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=d
HTML:
html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</div>
</form>
</body>
</html>
<FORM name="guideform">
<SELECT name="guidelinks">
<OPTION SELECTED value="jex6.htm">Page 1
<OPTION value="jex7.htm">My Cool Page
</SELECT>
<INPUT type="button" name="go" value="Go!" onClick="window.location=d
HTML:
html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<select name="mydropdown">
<option value="Milk">Fresh Milk</option>
<option value="Cheese">Old Cheese</option>
<option value="Bread">Hot Bread</option>
</select>
</div>
</form>
</body>
</html>
Check this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function showDD() {
document.getElementById("dropdown").style.display = "block";
}
</script>
</head>
<body>
<img src="http://www.bombayharbor.com/productImage/0672272001199678936/Led_Open_Sign.jpg" width="64" onclick="showDD()" />
<select id="dropdown" style="display:none;position:absolute;left:10px;top:10px" multiple="multiple" onclick="this.style.display='none'">
<option>Select...</option><option>2</option><option>3</option>
</select>
</body>
</html>
wow that is cool, now, i have some more questions.
how do i make the size of the drop down box bigger and have the drop down box in a different color, and also i put in a link in the option area but it didn't work, so how do i get the text to link.
thanks for your help
how do i make the size of the drop down box bigger and have the drop down box in a different color, and also i put in a link in the option area but it didn't work, so how do i get the text to link.
thanks for your help
>how do i make the size of the drop down box bigger
add width:320px in the style attribute for example
>and have the drop down box in a different color
add background-color:#3C6 in the style attribute for example
>i put in a link in the option area but it didn't work
I don't its possible. You can change location url if the user click on it : onclick="location.href=thi
add width:320px in the style attribute for example
>and have the drop down box in a different color
add background-color:#3C6 in the style attribute for example
>i put in a link in the option area but it didn't work
I don't its possible. You can change location url if the user click on it : onclick="location.href=thi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function showDD() {
document.getElementById("dropdown").style.display = "block";
}
</script>
</head>
<body>
<img src="http://www.bombayharbor.com/productImage/0672272001199678936/Led_Open_Sign.jpg" width="64" onclick="showDD()" />
<select id="dropdown" style="display:none;position:absolute;left:10px;top:10px;width:320px;background-color:#3C6" multiple="multiple" onclick="this.style.display='none'">
<option>Select...</option>
<option onclick="location.href=this.text">http://www.google.com</option>
<option onclick="location.href=this.text">http://www.experts-exchange.com</option>
</select>
</body>
</html>
wow your good, okay final questions, now if i want the drop down box to come on when the mouse hovers over it, instead of me clicking on the image, how do i do that? ,and also how do i remove the scroll that is on the side of the box when i preview it in fire fox but its not there when its in IE?
>http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24305395.html
line 13 replace onclick by onmouseover
>and also how do i remove the scroll that is on the side of the box when i preview it in fire fox but its not there when its in IE?
check this thread : http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24305395.html
line 13 replace onclick by onmouseover
>and also how do i remove the scroll that is on the side of the box when i preview it in fire fox but its not there when its in IE?
check this thread : http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24305395.html
I clicked on the link you sent me and they all are saying you cant remove that, but i have web site that shows it can be done , http://www.campshanearizona.com/request_info.php
and the mouse over works but it stays on how do it go off when i remove the mouse over like the page i have in the link above
and the mouse over works but it stays on how do it go off when i remove the mouse over like the page i have in the link above
Question has a verified solution.
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
All Courses
From novice to tech pro — start learning today.
It's not a select-listbox but a select-dropdown :)
>and the mouse over works but it stays on how do it go off when i remove the mouse over like the page i have in the link above
add onmouseout="this.style.dis
Open in new window