webForumDet fria alternativet
Logga in / Bli medlem

bild mouseover

JavaScript

8 svar · 371 visningar · startad av mr.mainline

mr.mainlines avatarmr.mainlineMedlem sedan feb. 2003777 inlägg
Frågan#1

Jag hade tänkt använda mig av ett script när muspeckaren förs över en bild i en cell så ska bilden vara kvar + att en annan bild ska komma fram fast i en annan cell och har hittat detta script,bara det att var lägger jag in det???
Scriptet är i två delar:

<!-- Javascriptet kan användas för tex bara utbyte av bilden som musen förs över, använd då bara:
onMouseOver="turnOn('image1') onMouseOut="turnOff('image1')
Om scriptet används för att ny bild skall visas på annat ställe, kan de bilderna visas på olika ställen eller samma ställe för alla bilder:
image101off = new Image();image101off.src = "popup1_blank.gif";
image102off = new Image();image102off.src = "popup2_blank.gif";
image103off = new Image();image103off.src = "popup3_blank.gif";
OBS! kom ihåg att lägga till för varje bild:
NAME="image1" NAME="image101" (Bilden som ligger på sidan) -->
<script>
<!--
if (document.images) {

image101off = new Image();
image101off.src = "popup1_blank.gif";
image102off = new Image();
image102off.src = "popup2_blank.gif";
image103off = new Image();
image103off.src = "popup3_blank.gif";

image1on = new Image();
image1on.src = "bild1_over.gif";

image1off = new Image();
image1off.src = "bild1.gif";

image101popup1 = new Image();
image101popup1.src = "popup1.jpg";

image2on = new Image();
image2on.src = "bild2_over.gif";

image2off = new Image();
image2off.src = "bild2.gif";

image102popup2 = new Image();
image102popup2.src = "popup2.jpg";

image3on = new Image();
image3on.src = "bild3_over.gif";

image3off = new Image();
image3off.src = "bild3.gif";

image103popup3 = new Image();
image103popup3.src = "popup3.jpg";

}
function turnOn(imageName)
{
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}

function turnOff(imageName) {
if (document.images)
{
document[imageName].src = eval(imageName + "off.src");
}

}
function turnDown(imageName, imageEnd) {
if (document.images)
{
document[imageName].src = eval(imageName + imageEnd);
}
}
// -->
</script>

---------------------------------------------------------------------------------

<p><a href="http://tmdata.x.se"
onMouseOver="turnOn('image1');turnDown('image101', 'popup1.src');"
onMouseOut="turnOff('image1');turnOff('image101');"
onMouseDown="turnDown('image101', 'popup1.src');">
<img name="image1" src="bild1.gif" border="0" WIDTH="95" HEIGHT="35"></a>
<a href="http://tmdata.x.se"
onMouseOver="turnOn('image2');turnDown('image102', 'popup2.src');"
onMouseOut="turnOff('image2');turnOff('image102');"
onMouseDown="turnDown('image102', 'popup2.src');">
<img name="image2" src="bild2.gif" border="0" WIDTH="95" HEIGHT="35"></a>
<a href="http://tmdata.x.se" onMouseOver="turnOn('image3');turnDown('image103', 'popup3.src');"
onMouseOut="turnOff('image3');turnOff('image103');"
onMouseDown="turnDown('image103', 'popup3.src');">
<img name="image3" src="bild3.gif" border="0" WIDTH="95" HEIGHT="35"></a></p>

<p><img name="image101" src="popup1_blank.gif"
width="188" height="212">
<img name="image102" src="popup2_blank.gif"
width="188" height="187">
<img name="image103" src="popup3_blank.gif"
width="157" height="161"></p>

-----------------------------------------------------------------------------------

Dessutom måste du ha en transparent GIF-bild, som "håller plats" åt den bild som skall synas när musmarkören förs över en meny. I exemplet ovan är det 3st. (3 olika platser där bilderna "dyker upp") De har samma storlek som bilden som tar deras plats när de syns. I det här exemplet heter de: popup1_blank.gif, popup2_blank.gif och popup3_blank.gif

snälla hjälp mig med detta,och förklara gärna på ett enkelt sätt :-))

Palles avatarPalleMedlem sedan apr. 20003 174 inlägg
#2

Ett sätt att lösa det på, hoppas detta gör det enklare för dig.. :)

[RED]<html>
<head>

	<script type="text/javascript">
	<!--
	
	if (document.images) {
		i1over = new Image();
		i1over.src = "bild1_over.gif";
			i1out = new Image();
			i1out.src = "popup1_blank.gif";
	
		i2over = new Image();
		i2over.src = "bild2_over.gif";
			i2out = new Image();
			i2out.src = "popup2_blank.gif";
	
		i3over = new Image();
		i3over.src = "bild3_over.gif";
			i3out = new Image();
			i3out.src = "popup3_blank.gif";
	}
	
	function over(img) {
		if (document.images) {
			document.getElementById(img).src=eval(img +"over.src");
		}
	}
	
	function out(img) {
		if (document.images) {
			document.getElementById(img).src=eval(img +"out.src");
		}
	}
	
	//-->
	</script>

</head>
<body>

<p>
	<!-- ( Länkarna ) -->
	<a href="http://tmdata.x.se" onmouseover="over('i1');" onmouseout="out('i1');"><img src="bild1.gif" border="0" width="95" height="35"></a><br>
	<a href="http://tmdata.x.se" onmouseover="over('i2');" onmouseout="out('i2');"><img src="bild2.gif" border="0" width="95" height="35"></a><br>
	<a href="http://tmdata.x.se" onmouseover="over('i3');" onmouseout="out('i3');"><img src="bild3.gif" border="0" width="95" height="35"></a>
</p> 
<p>
	<!-- ( Bilderna ) -->
	<img src="popup1_blank.gif" width="188" height="212" id="i1"><br>
	<img src="popup2_blank.gif" width="188" height="187" id="i2"><br>
	<img src="popup3_blank.gif" width="157" height="161" id="i3">
</p> 

</body>
</html>[/RED]
mr.mainlines avatarmr.mainlineMedlem sedan feb. 2003777 inlägg
#3

kan du förklara lite mer var jag ska lägga scriptet,om jag fattat det rätt så ska bilderna och själva länkarna läggas ihopa ?
isåfall hur? är ny på det här med script.

mr.mainlines avatarmr.mainlineMedlem sedan feb. 2003777 inlägg
#4

och förresten så har jag redan cellerna färdiga,ska jag då lägga in scriptet i de cellerna?

Palles avatarPalleMedlem sedan apr. 20003 174 inlägg
#5

• Funktionen placerar du mellan <head> och </head> i ditt dokument.
• Länkarna, markerade som <!-- ( Länkarna ) --> i mitt exempel, lägger du i den cellen där du vill ha länkarna.
• Bilderna, markerade som <!-- ( Bilderna ) --> i mitt exempel, lägger du i den cellen där du vill via bilderna.

mr.mainlines avatarmr.mainlineMedlem sedan feb. 2003777 inlägg
#6

ok..det funkar men det blev inte snyggt.....det ska vara mer som på denna sida: http://www.sportringen.se/hedemora/ om ni kollar där och för muspekaren över cykelen skon m.m så kommer det upp en text under bilden,det är så jag vill ha det....

Peter SMedlem sedan dec. 20025 483 inlägg
#7

Här har du någonting att leka med ;)

<head>

<script type="text/javascript">
<!--

function showHide( id ){
	var elm = ( document.all ) ? document.all[ id ] : ( document.getElementById ) ? document.getElementById( id ) : document.layers[ id ];

	elm.style.visibility = ( elm.style.visibility == "hidden" ) ? "visible" : "hidden";
};

//-->
</script>

</head>

...

<div id="n1" style="position:absolute; visibility:hidden; background:#eee; border:1px solid #666; padding:1px; font:bormal 12px verdana; left:100px; top:100px">Foo</div>
<div id="n2" style="position:absolute; visibility:hidden; background:#eee; border:1px solid #666; padding:1px; font:bormal 12px verdana; left:150px; top:100px">Bar</div>

<table>
<tr>
	<td><img src="foo.png" onmouseover="showHide('n1')" onmouseout="showHide('n1')"></td>
	<td><img src="bar.png" onmouseover="showHide('n2')" onmouseout="showHide('n2')"></td>
</tr>
</table>

:)

mr.mainlines avatarmr.mainlineMedlem sedan feb. 2003777 inlägg
#8

ok..tack...har nästen fått tätt på det att jag la första delen av koden head och head och sen själva "text koden" den som visar text vid mouseover där jag ville ha det på sidan,men när jag testar det så funkar bilden och texten kommer fram men inte i den cellen jag vill ha det..
Mvh.Mr.mainline

Peter SMedlem sedan dec. 20025 483 inlägg
#9

Pröva detta istället:

<head>
<script type="text/javascript">
<!--

var images = new Array( "foo.png", "faa.png", "bar.png", "baz.png" );

function preload(){
	if( arguments[ 0 ] >= images.length )
		return;

	var img = new Image();
	img.src = images[ arguments[ 0 ] ];

	preload( arguments[ 0 ] + 1 );
};

preload( 0 );

function showHide( id ){
	var elm = ( document.all ) ? document.all[ id ] : ( document.getElementById ) ? document.getElementById( id ) : null;

	if( elm )
		elm.style.display = ( elm.style.display == "none" ) ? "inline" : "none";
};

//-->
</script>
</head>

<body>

<table>

<tr>
	<td><img src="foo.png" alt="foo.png" onmouseover="showHide('n1')" onmouseout="showHide('n1')"></td>
	<td><img src="bar.png" alt="bar.png" onmouseover="showHide('n2')" onmouseout="showHide('n2')"></td>
</tr>

<tr>
	<td><div id="n1" style="display:none"><img src="faa.png" alt="faa.png"></div></td>
	<td><div id="n2" style="display:none"><img src="baz.png" alt="baz.png"></div></td>
</tr>

</table>

</body>

:)

256 ms totalt · 3 externa anrop · v20260731065814-full.767b4345
118 ms — deklarationer (db)
0 ms — hämta statistik (cache)
136 ms — hämta tråd, inlägg och bilagor (db)