Javascript Popup

M

Mtek

Hi,

I know there are lots of pages on this, but why can't I find something
simple?

I have an image on my page. All I want is when the mouse rolls over
the image, an image will appear next to it, and disappear when the
mouse moves away.

I do not want to use HREF because it is only an image, not a link. I
do not want the HARD appearing.

Can this be done???

Thank you.

John
 
J

Joost Diepenmaat

Mtek said:
Hi,

I know there are lots of pages on this, but why can't I find something
simple?

I have an image on my page. All I want is when the mouse rolls over
the image, an image will appear next to it, and disappear when the
mouse moves away.

I do not want to use HREF because it is only an image, not a link. I
do not want the HARD appearing.
Click to expand...

HREFS are for links, they've got nothing to do with your question, as
far as I can tell. I haven't seen a HARD appearing anywhere, ever. I
don't even know what a HARD is. Why does your subject mention popups
while the contents of your post doesn't mention popups at all?
Can this be done???
Click to expand...

Maybe. Search for onmouseover, onmouseout and possibly :hover.
 
M

Mtek

HREFS are for links, they've got nothing to do with your question, as
far as I can tell. I haven't seen a HARD appearing anywhere, ever. I
don't even know what a HARD is. Why does your subject mention popups
while the contents of your post doesn't mention popups at all?


Maybe. Search for onmouseover, onmouseout and possibly :hover.
Click to expand...


Well, it is not a link of any sorts. It is just when you move over
the image, I want another image to popup next to it.

So, for example, you have a question mark, which means help, and when
you move your mouse over it, another image appears with some text in
it.....
 
J

James Black

Well, it is not a link of any sorts. It is just when you move over
the image, I want another image to popup next to it.

So, for example, you have a question mark, which means help, and when
you move your mouse over it, another image appears with some text in
it.....
Click to expand...

The problem isn't that hard, but you would need to decide on
technology. For example, you can bring up, in a separate div that that
has an image tag, on a higher z-index, the image, on mouseover. If you
have it hidden when the page loads then the user doesn't have to waste
time downloading the file.

You could also use the canvas tag, but that is a bit more work, but,
cannot be copies, except through a screenshot, and to use it on IE you
would need to use iecanvas, but, Safari, Opera and Firefox supports
the canvas tag.

The canvas tag would be the best way to put some dynamic text in, such
as the current date/time, but, you could have the image modified on
the fly on the server, though a cgi program, and then have the image
downloaded.

Good luck.
 
B

beedeebee

The problem isn't that hard, but you would need to decide on
technology. For example, you can bring up, in a separate div that that
has an image tag, on a higher z-index, the image, on mouseover. If you
have it hidden when the page loads then the user doesn't have to waste
time downloading the file.

You could also use the canvas tag, but that is a bit more work, but,
cannot be copies, except through a screenshot, and to use it on IE you
would need to use iecanvas, but, Safari, Opera and Firefox supports
the canvas tag.

The canvas tag would be the best way to put some dynamic text in, such
as the current date/time, but, you could have the image modified on
the fly on the server, though a cgi program, and then have the image
downloaded.

Good luck.
Click to expand...

this works in safari, ie and ff.


<!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>
<title>page title</title>
</head>
<script type="text/javascript">
function showhide(show,elem)
{
document.getElementById(elem).style.display = show;
}
</script>
<body>
<table>
<tr>
<td onmouseover="showhide('','imageonright1');"
onmouseout="showhide('none','imageonright1');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright1" alt="Google"/</td>
</tr><tr>
<td onmouseover="showhide('','imageonright2');"
onmouseout="showhide('none','imageonright2');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright2" alt="Google"/</td>
</tr><tr>
<td onmouseover="showhide('','imageonright3');"
onmouseout="showhide('none','imageonright3');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright3" alt="Google"/</td>
</tr>
</table>
</body>


</html>
 
M

Mtek

this works in safari, ie and ff.

<!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>
    <title>page title</title>
</head>
<script type="text/javascript">
function showhide(show,elem)
{
    document.getElementById(elem).style.display = show;}

</script>
<body>
<table>
<tr>
<td onmouseover="showhide('','imageonright1');"
onmouseout="showhide('none','imageonright1');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright1" alt="Google"/

</td>
</tr><tr>
<td onmouseover="showhide('','imageonright2');"
onmouseout="showhide('none','imageonright2');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright2" alt="Google"/

</td>
</tr><tr>
<td onmouseover="showhide('','imageonright3');"
onmouseout="showhide('none','imageonright3');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright3" alt="Google"/

</td>
</tr>
</table>
</body>

</html>- Hide quoted text -

- Show quoted text -
Click to expand...

I'll try an implement the above and see if it works. I know nothing
about the canvas tag, so I'd have to read on that....

I'll be back shorty.
 
M

Mtek

this works in safari, ie and ff.

<!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>
    <title>page title</title>
</head>
<script type="text/javascript">
function showhide(show,elem)
{
    document.getElementById(elem).style.display = show;}

</script>
<body>
<table>
<tr>
<td onmouseover="showhide('','imageonright1');"
onmouseout="showhide('none','imageonright1');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright1" alt="Google"/

</td>
</tr><tr>
<td onmouseover="showhide('','imageonright2');"
onmouseout="showhide('none','imageonright2');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright2" alt="Google"/

</td>
</tr><tr>
<td onmouseover="showhide('','imageonright3');"
onmouseout="showhide('none','imageonright3');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright3" alt="Google"/

</td>
</tr>
</table>
</body>

</html>- Hide quoted text -

- Show quoted text -
Click to expand...


Seems to work great. The only think is that the original image seems
to move when the second image appears. I'll see what is wrong there,
but thanks for the code......
 
M

Mtek

this works in safari, ie and ff.

<!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>
    <title>page title</title>
</head>
<script type="text/javascript">
function showhide(show,elem)
{
    document.getElementById(elem).style.display = show;}

</script>
<body>
<table>
<tr>
<td onmouseover="showhide('','imageonright1');"
onmouseout="showhide('none','imageonright1');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright1" alt="Google"/

</td>
</tr><tr>
<td onmouseover="showhide('','imageonright2');"
onmouseout="showhide('none','imageonright2');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright2" alt="Google"/

</td>
</tr><tr>
<td onmouseover="showhide('','imageonright3');"
onmouseout="showhide('none','imageonright3');"><p>Hover over me</p></
td>
<td width="276" height="110">
<img width="276" height="110" src="http://www.google.com/intl/en_ALL/
images/logo.gif" style="display:none;" id="imageonright3" alt="Google"/

</td>
</tr>
</table>
</body>

</html>- Hide quoted text -

- Show quoted text -
Click to expand...


One other issue I found.....because this is being done in a table, it
expands the entire table cell. I'm hoping for soemthing like this:
http://www.cssplay.co.uk/menu/balloons.html

But that does not work in many browsers.........
 
T

Tom de Neef

:

One other issue I found.....because this is being done in a table, it
expands the entire table cell. I'm hoping for soemthing like this:
http://www.cssplay.co.uk/menu/balloons.html
Click to expand...
But that does not work in many browsers.........
Click to expand...

It uses javascript, whereas the other solutions were pure html. And the js
is obfuscated.
Look at boxover.js if you want a script approach. It is free and good.
Check www.qolor.nl/spelling/ww.htm for an example. Text can be replaced by
images or anything html can contain.
Copy the source from www.qolor.nl/spelling/data/wwBoxover.js if you can't
find it elsewhere. For instructions search for boxover tooltips.
Tom
 
B

blechler

Hi,

I know there are lots of pages on this, but why can't I find something
simple?

I have an image on my page. All I want is when the mouse rolls over
the image, an image will appear next to it, and disappear when the
mouse moves away.

I do not want to use HREF because it is only an image, not a link. I
do not want the HARD appearing.

Can this be done???

Thank you.

John
Click to expand...

Maybe you might want to try something like overLib. http://www.bosrup.com/web/overlib/.

Bernie
 
T

Thomas 'PointedEars' Lahn

Mtek said:
I have an image on my page. All I want is when the mouse rolls over
the image, an image will appear next to it, and disappear when the
mouse moves away.

I do not want to use HREF because it is only an image, not a link. I
do not want the HARD appearing.
Click to expand...

What is "HARD" anyway?
Can this be done???
Click to expand...

Yes, you can use CSS for that, so that it degrades gracefully. However,
I suggest you use a[href="#foo" name="foo"]:hover since the :hover
pseudo-class is not supported for other element types than `a' and `area'
by MSIE 6 and probably other older user agents.

BTW, your Question Mark key seems to be malfunctioning.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Positioning a popup 1
Positioning a popup 10
Gallery - mosiac/grid layout with filtering and information page popup 1
Canvas drawing HTML Javascript on elementor 1
Logo and nav disapear/appear on scroll, but on x-axis 0
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast 1
How to position the *tooltip* comment on these buttons? 9

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 156

Forum statistics

Threads
473,773
Messages
2,569,594
Members
45,114
Latest member
GlucoPremiumReview

Latest Threads

Top