So, I am editing my profile over at IAM, you prolly don't know what that is though because it is a site that is home to bodily modified peoples. Anywhozer, There is this style HTML that I have seen on a few profiles, and I would like to do it, with a little addition. I have the code for the basic part of it, but what I want to add is when they go over the selection, I want a picture of what they picked to show up. The code is for a drop box that just shows what they are. For ex, IAM would be at the top, and in the dropbox would be Modified, heavily pierced, a nutjob, ect ect.
Code:
<body>
<form action="">
<select name="Less of this">
<option value="Less">Less of this</option>
<option value="narrow minded">narrow minded people</option>
<option value="arrogance">arrogance</option>
<option value="stress">stress</option>
<option value="drugs">drugs</option>
<option value="raisins">raisins in my muesli</option>
<option value="bananas">bananas, avocado, mushrooms</option>
<option value="sunday drivers">sunday drivers</option>
<option value="children">children</option>
<option value="pets">pets</option>
<option value="smoke">smoke</option>
</select>
</form>
</body>
</html>
|
So basically, what I am asking is how would I be able to add the feature of a picture showing up when they go over the selection? 100 E-piggies if you want it and can help me out...
Mmm I took an HTML/CSS class and have a guide laying somewhere around my room.
If ^ one doesn't work let me know and Ill dig it up and post the code. ♥
Are you referring to when the user hovers the mouse over a selection? That'll be difficult for a select box. You can do it when they _select_ an option from the select box.
Alternative is to make your own custom select box, but that takes more effort.
well Zinga, either way would work. But you can make a selection, and it would just appear in the dropbox, but just as the only one, and selected until you click on something else. But when they do click on it then, next to it would be a picture of what they just selected. I'm not sure how difficult this would be, and I'll try the first offered suggestion tomorrow sometime.
Do you mean something like this?
HTML Code
<html>
<body>
<form action="">
<select name="Less of this" onchange="var o=escape(this.options[this.selectedIndex].value);document.getElementById('select_img').src='http://example.com/images/'+o+'.jpg';">
<option value="Less">Less of this</option>
<option value="narrow minded">narrow minded people</option>
<option value="arrogance">arrogance</option>
<option value="stress">stress</option>
<option value="drugs">drugs</option>
<option value="raisins">raisins in my muesli</option>
<option value="bananas">bananas, avocado, mushrooms</option>
<option value="sunday drivers">sunday drivers</option>
<option value="children">children</option>
<option value="pets">pets</option>
<option value="smoke">smoke</option>
</select>
</form>
<img src="" id="select_img" />
</body>
</html>
|
Haven't tested it.
You'll need to fix the URL above (obviously). It'll replace the "'+o+'" above with the value of the selected item, eg if you selected the first item, it'll set the image's src to:
Code:
http://example.com/images/Less.jpg
|
Okay, I am confused as how to replace your test link with a live link. I'm going to try and google HTML for dummies or something...