Forum Moderators: open
It would be easier to explain it showing the situation but I don't think I'm allowed to post links to the page on this board...
I have a menu with very small squares. When you mouseover on them I want to have an image with text appear on ANOTHER place on my site.
I've done a lot of searching but I just can't find it for another place then the mouseover itself.
Keep in mind that the place where my image loads is not just one image. If you point your mouse above square 1 it will be an image with home, if you point your mouse above square 2, then at the SAME POSITION, ANOTHER image has to appear....
Can you guys help me out...?
This can be done using either JavaScript or CSS.
Here's an example by Eric Meyer:
[meyerweb.com...]
I tried some options, but I don't see it ever happening with 2 images...
what he does is <a href=blabla>Home(= css designed button)<img src=blabla></a> so the image is hidden till mouseover and can be shown somewhere on the page (VERY hard to put it in the right place btw with css!)
So you can do it with javascript... can you give me an example of that?
<a href="" id="link">Link stuff<div>other text<img src="" class="img1"><img src="" class="img2"></div></a>
styles:
a#link div {
display:none;
left:desired position of text;
top:desired position of text;
}
a#link div img.img1{
left:desired position of img1;
top:desired position of img1;
}
a#link div img.img2{
left:desired position of img2;
top:desired position of img2;
}
a#link:hover div{
display:absolute;
}
That should do the trick.
of course JS is also trivial, but personally I prefer to do things without if possible.
SN
What you think is that I have a text link and I want 2 images to appear when I mouseover them.
What I have is a IMAGE (a small square) which has to be always visible.
But because a square doesn't really tell you what your menu points too... i want a NEW IMAGE that appears only when Mouseover.
That's why I think that it's impossible with CSS because you can link 2 images in one <a> but i don't think you can put a <div or a style between those 2 like that you only style the 2nd image to be invisible...>
Now just imagine that these home links away on the left are PICS (and not text edited with css).
If you mouseover those linkable pics then... you see a new pic appear...
That's what i try to do...
if so, post the rollover code you have and we can modify it to pass multiple parameters for the swap.
If the problem is the new immage then i can make an image with the same color of the background so then it is idd 2 mouseovers...
Now is it 1 mouseover of the home link and at the same time a new image appears
I can't make any code that works even a bit because i can't find a way to let my home image stay on the screen and hide the others...
korkus check your Sticky Mail...
//<--
window.onerror = null;
var NS = 0;
var IEfour = 0;
browserName = navigator.appName.substring(0,8);
browserVer = parseFloat(navigator.appVersion);
if (browserName == "Netscape" && browserVer >= 3)
{ NS = 1; }
else
if (browserName == "Microsof" && browserVer >= 4)
{ IEfour = 1; }
if (NS ¦¦ IEfour)
{
flashers = new Array("scrflip", "one", " two");
button = new Array(5);
for (count=0; count<=4; count++)
{
button[count] = new Image(); }
button[0].src="scr1.jpg"
button[1].src="scr2.jpg"
button[2].src="scr3.jpg"
button[3].src = "bton.jpg";
button[4].src = "btoff.jpg";
}
function flip(daname, danumber)
{ if (NS ¦¦ IEfour) {
document.images[flashers[daname]].src = button[danumber].src; }
}
then for the links
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 >
<TR>
<TD><IMG SRC="scr1.jpg" name="scrflip" HEIGHT=25 WIDTH=100></TD>
<TD></TD>
</TR>
<TR>
<TD><A HREF="your link here" onMouseover="(flip(0,1), flip(1,3))" onMouseout="(flip(1,4), flip(0,0))">
<IMG SRC="btoff.jpg" name="one" HEIGHT=25 WIDTH=100></TD>
<TD><A HREF="your link here" onMouseover="(flip(0,2), flip(2,3))" onMouseout="(flip(2,4), flip(0,0))">
<IMG SRC="btoff.jpg" name="two" HEIGHT=25 WIDTH=100></TD>
</TR>
</TABLE>
copied from the template... with a bit of trial and error i'll figure it out i guess :)
...
<style type="text/css">
<!--
html, body {
width: 96%;
height: 94%;
padding: 4px;
margin: 0px;
background: #E6E6E7;
}
a, a:link, a:visited, a:active {
display: block;
color: yellow;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: navy;
}
.item {
float: left;
height: 19px;
width: 96px;
margin: 6px 0px;
padding: 2px 2px 4px 2px;
border: 2px solid gray;
background-image: url('btoff.jpg');
text-align: center;
}
.item:hover { /* CSS rollover */
border: 2px solid navy;
background-image: url('bton.jpg');
}
#top {
height: 25px;
width: 100px;
margin: 6px 0px 6px 0px;
}
-->
</style>
<script type="text/javascript">
<!--
// array of images
var imgs = null;
// preload the images
function preload() {
imgs = new Array();
var tmp = new Array();
tmp[0] = "scr1.jpg";
tmp[1] = "scr2.jpg";
tmp[2] = "scr3.jpg";
tmp[3] = "bton.jpg";
tmp[4] = "btoff.jpg";
for (var j = 0; j < tmp.length; j++) {
imgs[j] = new Image();
imgs[j].src = tmp[j];
}
delete tmp;
}
// switch images on mouseover event
function changeTo(topnum) {
var top = document.getElementById("top");
top.src = "scr" + topnum + ".jpg";
}
window.onload = preload;
//-->
</script>
</head>
<body>
<div style="clear: left;">
<div>
<img id="top" src="scr1.jpg" />
</div>
<!-- mouseover rollovers control 'top' image -->
<!-- CSS rollovers control anchor backgrounds -->
<a href="http://somewhere.over.there/" class="item"
onmouseover="changeTo(1);"
onmouseout="changeTo(1);">
Go there!
</a>
<a href="http://somewhere.over.there/" class="item"
onmouseover="changeTo(2);"
onmouseout="changeTo(1);">
Go there!
</a>
<a href="http://somewhere.over.there/" class="item"
onmouseover="changeTo(3);"
onmouseout="changeTo(1);">
Go here!
</a>
</div>
...
Hope that helps. :)
Jordan
