Eggie 0 Report post Posted February 19, 2008 I need a script that does this:Lets say I have form with options...you surely know what that is... <form name="form2" method="post" action="race.php?action=race"><table border="1"><td>Who do you wanna race?</td></table> <select size=5 name="bike"> <option value="Derbi Senda 50">Derbi Senda 50</option> <option value="Honda NS 50 R">Honda NS 50 R</option> <option value="Suzuki ZR 50">Suzuki ZR 50</option> <option value="Yamaha DT 50 MX">Yamaha DT 50 MX</option> <option value="Aprilia RS 50">Aprilia RS 50</option> </select>-<a href="java script:launchClasses()">?</a> <input type=submit value=Register> </td></tr></form>When i put my mouse over one of them i want a picture of bike on which your mouse is on to pop up...I hope you understand what i mean...i can't rephrase it to be more meaningful...i tried Share this post Link to post Share on other sites
Orannis 0 Report post Posted February 20, 2008 You mean something like this?linkThere is a whole pile of scripts for this here depending on what language you want to use.Hope this helps you Eggie,~ORannis Share this post Link to post Share on other sites
Eggie 0 Report post Posted February 20, 2008 You mean something like this? link There is a whole pile of scripts for this here depending on what language you want to use. Hope this helps you Eggie, ~ORannis i want from it to be more like this ajaxbut there should be picture inside Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted February 20, 2008 I need a script that does this:Lets say I have form with options...you surely know what that is... <form name="form2" method="post" action="race.php?action=race"><table border="1"><td>Who do you wanna race?</td></table> <select size=5 name="bike"> <option value="Derbi Senda 50">Derbi Senda 50</option> <option value="Honda NS 50 R">Honda NS 50 R</option> <option value="Suzuki ZR 50">Suzuki ZR 50</option> <option value="Yamaha DT 50 MX">Yamaha DT 50 MX</option> <option value="Aprilia RS 50">Aprilia RS 50</option> </select>-<a href="java script:launchClasses()">?</a> <input type=submit value=Register> </td></tr></form>When i put my mouse over one of them i want a picture of bike on which your mouse is on to pop up...I hope you understand what i mean...i can't rephrase it to be more meaningful...i tried Well, i think that it is not possible to do that with simple HTML and Javascript because you can't attach an event handler to the OPTION element, instead you can attach an event handler to the Focus, Blur and Change events of the SELECT element. Right now i'm testing a simple code to work with the Change event, so, give some time to complete it.Best regards, Share this post Link to post Share on other sites
Eggie 0 Report post Posted February 20, 2008 did i hear wrong or are you doing something to help me ;)and btw i didn't understand a thing u said except that what i said Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted February 20, 2008 did i hear wrong or are you doing something to help me ;)and btw i didn't understand a thing u said except that what i saidNo, you don't hear wrong, i'm doing a javascript to help you, and what you don't understand???This is the code i make that works, it is very simple and it is open to a lot of modifications:<html><head><title>Image Pop Up On Option Change </title><script type="text/javascript"> function showpic(o) { o = parseInt(o); switch (o) { case 1: imgName='del.gif';break; case 2: imgName='doc2.gif';break; case 3: imgName='docempty.gif';break; case 4: imgName='docurl.gif';break; case 5: imgName='new.gif';break; } var DivImage = document.getElementById('DivImg'); var DisplayImg = document.getElementById('IdImg'); DisplayImg.src=imgName; DivImage.style.visibility="visible"; }</script></head><body><form name="form2" method="post" action="race.php?action=race"><table border="1"><td>Who do you wanna race?</td></table> <select size=5 name="bike" onchange="showpic(this.options[this.selectedIndex].value)"> <option value="1" >Derbi Senda 50</option> <option value="2">Honda NS 50 R</option> <option value="3" >Suzuki ZR 50</option> <option value="4">Yamaha DT 50 MX</option> <option value="5">Aprilia RS 50</option> </select>-<a href="java script:launchClasses()">?</a> <input type=submit value=Register> <div id="DivImg" style="position:relative;top:-50px;left:150px;z-index:20;width:25px;height:25px;visibility:hidden;text-align:center;"><img id="IdImg"></div></td></tr></form></body></html>Take in mind that you must change all the images -names and paths- correctly to work at your website, if you want you can view it on action at Image Pop-up On Option Change.Best regards, Share this post Link to post Share on other sites
iGuest 3 Report post Posted February 20, 2008 Nice work. Very cool effect.Can it be changed to an onhover event instead of onchange? Share this post Link to post Share on other sites
Eggie 0 Report post Posted February 20, 2008 (edited) ok...i will try that code when i get home...i'm at my girlfriends house at this moment...i hope it works ;)EDIT: thanx man...very nice...i'm impressed...wow...now i got that...now i go for other thing on my to-do list Edited February 20, 2008 by Eggie (see edit history) Share this post Link to post Share on other sites
iGuest 3 Report post Posted February 20, 2008 Why can't you attach an event to an option element? There is the onmouseover event which will do what you want, I could even write it up but I don't have time so if anyone can show this method, they should.Cheers,MCP.S. Just rethinking, why not just a CSS hover effect and eliminate Javascript, haven't actually thought too much about it yet, just popped into my head as I was leaving this thread. Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted February 21, 2008 (edited) jlhaslip Yes and No, yes if you use it with another element that supports the onmouseover event like the A or P tags, and no if the element do not support it, like in this case with the SELECT. For example the following same function can be used with the A tag and with the P element like: <a href="#" onmouseover="showpic(1)">Attached to the mouseover event</a><p onmouseover="showpic(2)">Attached to the mouseover event of the P tag</p>In real world is logic that this fuction must use a variable as its value. Eggie No problem, i'm happy that it helps you. mastercomputers Because the OPTION element do not support the mouseover event, the SELECT element supports it but as a whole, if you attach the same function to the SELECT it will work but also you will need more code to get the same effect, you will need to detect the exact position of the x,y coordinates of the mouse position when it is over any of the options, etc, in other words MORE COMPLICATED. It would be very interesting to code something like that, i will appreciate it a lot if you post your solution if you do it. About the CSS hover effect, you are right, you can use it and it would work very nice even with the OPTION element but the problem is that it doesn't work with Internet Explorer. BTW, I test my code with Internet Explorer 6, Firefox 2.0.0.12 and Opera 9.24 and i can say that with Firefox all the functionality works perfectly, Opera also but the CSS hover effect only works with the INPUT element not with the OPTION, and Internet Explorer as i say above do not support the CSS hover effect in any case, well this is not absolutely true, because IE supports it with the A element, but in this example i don't use it . So the new code is this: <html><head><title>Image Pop Up On Option Change </title><script type="text/javascript"> function showpic(o) { o = parseInt(o); switch (o) { case 1: imgName='del.gif';break; case 2: imgName='doc2.gif';break; case 3: imgName='docempty.gif';break; case 4: imgName='docurl.gif';break; case 5: imgName='new.gif';break; } var DivImage = document.getElementById('DivImg'); var DisplayImg = document.getElementById('IdImg'); DisplayImg.src=imgName; DivImage.style.visibility="visible"; }</script><style type="text/css">form#form1 input {border:1px solid #414d59; padding-left:0.5em; margin-bottom:0.6em; width:230px; background:#f2f2f2;}form#form1 input:hover{ background:#b80b38; border:1px solid #fff; color:#fff;}form#form1 input:focus{background:#fff; border:1px solid #b80b38; color:#b80b38;}form#form1 option {background:#f2f2f2;}form#form1 option:hover { background:#b80b38;color:#fff;}form#form1 option:focus {background:#fff; color:#b80b38;}</style></head><body><form name="form2" method="post" action=""><table border="1"><td>Who do you wanna race?</td></table> <select size=5 name="bike" onchange="showpic(this.options[this.selectedIndex].value)" > <option value="1" >Derbi Senda 50</option> <option value="2">Honda NS 50 R</option> <option value="3" >Suzuki ZR 50</option> <option value="4">Yamaha DT 50 MX</option> <option value="5">Aprilia RS 50</option> </select>-<a href="java script:launchClasses()">?</a> <input type=submit value=Register> <div id="DivImg" style="position:relative;top:-50px;left:150px;z-index:20;width:25px;height:25px;visibility:hidden;text-align:center;"><img id="IdImg"></div><!-- code addition - here works the option onmouseover event but only with Firefox --><select size=5 name="biketwo" > <option value="1" onmouseover="showpic(1);">Derbi Senda 50</option> <option value="2" onmouseover="showpic(2);">Honda NS 50 R</option> <option value="3" onmouseover="showpic(3);">Suzuki ZR 50</option> <option value="4" onmouseover="showpic(4);">Yamaha DT 50 MX</option> <option value="5" onmouseover="showpic(5);">Aprilia RS 50</option> </select><!-- code addition --></form><a href="#" onmouseover="showpic(1)">Attached to the mouseover event of the A tag</a><br /><p onmouseover="showpic(2)">Attached to the mouseover event of the P tag</p><form id="form1"><input type="text" value="a value"><select size=5 name="bike" > <option value="1" >Derbi Senda 50</option> <option value="2">Honda NS 50 R</option> <option value="3" >Suzuki ZR 50</option> <option value="4">Yamaha DT 50 MX</option> <option value="5">Aprilia RS 50</option> <option value="6">Aprilia RS 250</option> <option value="7">Aprilia RS 150</option> </select></form></body></html>and can be viewed in action at Image Pop-up On Option Change Version 2 Best regards, EDIT 1: Code addition that demostrates that is possibly to attach a function to the onmouseover event handler of the OPTION element but only works with Firefox. EDIT 2: Check at Image Pop-up On Option Change Version 3 the last version of this code, especially the last SELECT, but as usual it only works with Firefox. Edited February 21, 2008 by TavoxPeru (see edit history) Share this post Link to post Share on other sites
iGuest 3 Report post Posted February 21, 2008 Maybe IE doesn't support it on option elements, but the option element indeed does support the onmouseover event.I just did up a quickie for this found at http://forums.xisto.com/no_longer_exists/Maybe I might have time to mess around and do the whole thing and show how images can be loaded inside a tooltip dialog, just like that found on DHTML goodies as well as fix IE to display it hovering over an option element, as long as javascript is enabled that is.Cheers,MC Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted February 21, 2008 I just test your code and it only works with Firefox not with Internet Explorer or Opera, also, as i supose, you are using the jquery library that is not bad and i think that it can be useful, i never use the jquery library but i know it is a very good JS library. Also, i'm thinking about copying some part of code for testing with my code.BTW, is it difficult to learn the JQuery library???? I'm start playing with another javascript library, Ext JS.Best regards, Share this post Link to post Share on other sites
iGuest 3 Report post Posted February 21, 2008 The jQuery library wasn't needed for this, basically it just cut my time down so I didn't have to write out the DOM manipulation which would have taken me a lot longer, also I would have had to use body onload to store an element in a variable, which does not work properly unless the document is fully loaded, and jQuery has a fix in there that allows you to manipulate the document after it's completed, that's my main reason for using it, only have tried it for 2 days and haven't looked through the source yet, but it's not a hard library to use but I think I'll be developing with it.I knew IE did not work with this, I had no idea that Opera failed this too. There are other means of accomplishing this, though IE's support of the onmouseover event seems to dampen these methods except this one that I just thought of:An unordered list of links with the onmouseover event, the unordered list can be turned into a drop down select using javascript.OK, so that's just an idea but will have to see if I can put that into proof, since yea, most things I think of sound possible, but may not when trying to prove it.Cheers,MCP.S.OK, I re-looked over the code, and noticed that it's a select box that displays all the bikes, but we don't have to... if we use links, we can use the onmouseover event and also the onclick to post the required form submission needed to register it. This would be more effective than trying to work with our limited option element due to other browsers support. Share this post Link to post Share on other sites
TavoxPeru 0 Report post Posted February 24, 2008 Thanks for the jQuery library information, i will download and test it soon, and you are right, manipulate the DOM is not easy but at the same is not difficult.An Unordered list of links is a very useful for doing this like this, also instead of a select you can create buttons, you have many options to play with, of course, it is a nice idea.BTW, i use this method many times to create things like this, check my sites listed below to view in action, also, you are right, the OPTION element is very limited.Best regards, Share this post Link to post Share on other sites
Eggie 0 Report post Posted February 24, 2008 (edited) need more help.... <table width=70% height=100% border="1" bordercolor=red><td valign=top align=center>Which class do you wanna race against?<form method="post" action="race.php"> <select size=5 name="class""> <option value="1">Class 50</option> <option value="2">Class 125</option> <option value="3">Class 250</option> <option value="4">Class 500</option> <option value="5">Class 600</option> </select><br> <input type=submit value=Race> </form></td></table>i need text pop-up just like with images but i want it in text format...can u do it for me pls?EDIT:i need it with if clause...like so if($wins1['rank']=='Newbie') {echo'(under option one) Your chance to win is 50%'; echo'(under option two) Your chance to win is 40%'; echo'(under option three) Your chance to win is 33%'; echo'(under option four) Your chance to win is 20%'; echo'(under option five) Your chance to win is 10%';}if($wins1['rank']=='Learner') {echo'(under option one) Your chance to win is 60%'; echo'(under option two) Your chance to win is 50%'; echo'(under option three) Your chance to win is 40%'; echo'(under option four) Your chance to win is 33%'; echo'(under option five) Your chance to win is 20%';} by the way...what do u think about my game...anyone wanna join the project??eggie.ismywebsite.com Edited February 25, 2008 by Eggie (see edit history) Share this post Link to post Share on other sites
