Welcome Guest ( Log In | Register )



3 Pages V   1 2 3 >  
 Reply to this topicStart new topic
> Image Popup On Mouseover
Eggie
post Feb 19 2008, 11:40 PM
Post #1


Advanced Member
Group Icon

Group: Members
Posts: 130
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
I need a script that does this:
Lets say I have form with options...you surely know what that is...
CODE
<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 wink.gif
Go to the top of the page
 
+Quote Post
Orannis
post Feb 20 2008, 12:24 AM
Post #2


Newbie [ Level 1 ]
Group Icon

Group: Members
Posts: 8
Joined: 19-February 08
Member No.: 28,542
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
Go to the top of the page
 
+Quote Post
Eggie
post Feb 20 2008, 12:34 AM
Post #3


Advanced Member
Group Icon

Group: Members
Posts: 130
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
QUOTE(Orannis @ Feb 20 2008, 01:24 AM) *
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 ajax
but there should be picture inside
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 20 2008, 12:42 AM
Post #4


Super Member
Group Icon

Group: [HOSTED]
Posts: 740
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
QUOTE(Eggie @ Feb 19 2008, 06:40 PM) *
I need a script that does this:
Lets say I have form with options...you surely know what that is...
CODE
<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 wink.gif

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,
Go to the top of the page
 
+Quote Post
Eggie
post Feb 20 2008, 12:47 AM
Post #5


Advanced Member
Group Icon

Group: Members
Posts: 130
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
did i hear wrong or are you doing something to help me wink.gif
and btw i didn't understand a thing u said except that what i said
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 20 2008, 02:21 AM
Post #6


Super Member
Group Icon

Group: [HOSTED]
Posts: 740
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
QUOTE(Eggie @ Feb 19 2008, 07:47 PM) *
did i hear wrong or are you doing something to help me wink.gif
and btw i didn't understand a thing u said except that what i said

No, 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:
CODE
<html>
<head>
<title>Image Pop Up On Option Change </title>
&lt;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,
Go to the top of the page
 
+Quote Post
jlhaslip
post Feb 20 2008, 07:44 AM
Post #7


Advanced Member
Group Icon

Group: Members
Posts: 182
Joined: 15-November 05
From: Inland from the Left Coast of Canada
Member No.: 9,627
Nice work. Very cool effect.

Can it be changed to an onhover event instead of onchange?
Go to the top of the page
 
+Quote Post
Eggie
post Feb 20 2008, 08:38 PM
Post #8


Advanced Member
Group Icon

Group: Members
Posts: 130
Joined: 19-January 08
From: Zagreb/Croatia
Member No.: 27,735
ok...i will try that code when i get home...i'm at my girlfriends house at this moment...i hope it works smile.gif

EDIT: thanx man...very nice...i'm impressed...wow...now i got that...now i go for other thing on my to-do list

This post has been edited by Eggie: Feb 20 2008, 09:32 PM
Go to the top of the page
 
+Quote Post
mastercomputers
post Feb 20 2008, 11:41 PM
Post #9


BUG.SWAT.PATROL
Group Icon

Group: Members
Posts: 626
Joined: 1-September 04
From: Auckland, New Zealand
Member No.: 27
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,


MC

P.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.
Go to the top of the page
 
+Quote Post
TavoxPeru
post Feb 21 2008, 01:12 AM
Post #10


Super Member
Group Icon

Group: [HOSTED]
Posts: 740
Joined: 8-April 06
From: Lima - Peru
Member No.: 12,579
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:

CODE
<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 wink.gif.

So the new code is this:

CODE
<html>
<head>
<title>Image Pop Up On Option Change </title>
&lt;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.

This post has been edited by TavoxPeru: Feb 21 2008, 06:16 AM
Go to the top of the page
 
+Quote Post
« Next Oldest · PHP · Next Newest »
 

3 Pages V   1 2 3 >
Reply to this topicStart new topic

Collapse

> Similar Topics

Topics Topics
  1. Php: Write Random Text As Image(3)
  2. Is It Possible To Create A String Image In Chinese(0)
  3. Saving A Php Generated Image To The Server(5)
  4. How Do I Make PHP Based Image Gallery Like This?(20)
  5. Uploading Image Via Admin Menu?(2)
  6. How Do I Resize An Image On The Fly?(8)
  7. Script For Viewing A Random Image Needed(3)
  8. Php :: Adding Image Over Image(5)
  9. Image Works With Php And Gd(3)
  10. Php :: Image Pixel Per Inch And Conversion(1)
  11. Need Help With Background Image...(12)
  12. Dynamic Gd Image(2)
  13. Dynamic Php Image And Better Php Code Question(10)


 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 21st August 2008 - 11:28 PM
Powered By IP.Board 2.2.1 © 2008  IPS, Inc.
Licensed to: Xisto Corporation