Navigation mit MOuseover

[=o-n-e=]

Hallo,

Ich habe etwas auf dieser Inet Seite gesehen, functional handmade pottery | Soup Studios Pottery Athens Georgia wie machen die das mit der Navigation?

ICh möchte auf meiner Intenet Seite auch auf der Linken Seite mehrere Navigationspunkte anbieten und rechts soll genau wie dort sich immer ein Bild wechseln!

Wie geht das mit wenig aufwand? nach möglichkeit ohne java!

Vielen dank

[Shadowman]

Mit JavaScript.

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Nötige JavaScript Befehle:

- getElementById

- src (image)

- function

HTML:

- div

- onMouseOver

[=o-n-e=]

ich hab das nun fas gelöst,

habe aber noch ein problem und zwar ist das 1.jpg zu tief wenn der mouseover effekt kommt. kann ich das einzeln anprechen? im css oder so?

alle anderen sind okay, nur das 1.jpg müsste ca. 50px höher.

<div id="content-text1">

<a href="/kontakt"><img src=/wp-content/themes/wpremix2/images/navi/schrift1.png" onMouseOver="this.src='/wp-content/themes/wpremix2/images/navi/1.jpg';"onMouseOut="this.src='/wp-content/themes/wpremix2/images/navi/schrift1.png';"; /></a>

</div>

danke

[bytebrain]

Hallo,

du kannst deinem div-Container <div id="content-text1"> per CSS-Befehl padding-top den Innenabstand beeinflussen.

<div id="content-text1" [COLOR="Red"]style="padding-top:10px"[/COLOR]>

Nur als Beispiel.

Gruß,

bytebrain

[=o-n-e=]

ja aber dann gehen doch auch die bilder schrift1.png nachoben, ich will ja nur ein bestimmtes bild ansprechen...

[ZuVieL]

if(image == "1.jpg") {

document.getElementById("content-text1").style.paddingTop = '10px';

}

[=o-n-e=]

if(image == "1.jpg") {

document.getElementById("content-text1").style.paddingTop = '10px';

}

danke, kann du mir das bitte mal an meinem beispiel zeigen?

wäre das so?

<div id="content-text1">

<a href="/kontakt"><img src=/wp-content/themes/wpremix2/images/navi/schrift1.png" onMouseOver="this.src='/wp-content/themes/wpremix2/images/navi/1.jpg';"onMouseOut="this.src='/wp-content/themes/wpremix2/images/navi/schrift1.png';"; /></a>

</div>

if(image == "1.jpg") {

document.getElementById("content-text1").style.paddingTop = '10px';

}

[ZuVieL]

<script>

	function changeImage(t, img_name) {

		img_path = '/wp-content/themes/wpremix2/images/navi';


		if(img_name == "1.jpg") {

			document.getElementById("content-text1").style.paddingTop = '10px';

		}

		else {

			document.getElementById("content-text1").style.paddingTop = '0px';

		}

		t.src = img_path + '/' + img_name;

	}

</script>


<div id="content-text1">

<a href="/kontakt"><img src="schrift1.png" onMouseOver="changeImage(this, '1.jpg')"  onMouseOut="changeImage(this, 'schrift1.jpg')"; /></a>

</div>

habe es nicht getestet. müsste aber funktionieren..

[=o-n-e=]

das onmouseover bild wird nicht angezeigt?

[ZuVieL]

ja dann hat sich wohl ein fehler eingeschlichen

[=o-n-e=]

okay, doch nun wird es angezeigt geht aber nicht nach oben ;( bleibt an der stelle kleben

[ZuVieL]

dann kann ich dir auch nicht helfen,

im IE, FF und Opera funktioniert es bei mir...

[=o-n-e=]

mach ich was faslch? kannst du hier mal drüber schauen?

<div id="content-text">

<div id="content-text1"><a href="/kontakt"><img onmouseover="this.src='/wp-content/themes/wpremix2/images/navi/1.jpg';" onmouseout="this.src='/wp-content/themes/wpremix2/images/navi/schrift1.png';" src="/wp-content/themes/wpremix2/images/navi/schrift1.png" alt="" /></a></div>

<script>

function changeImage(t, img_name) {

img_path = '/wp-content/themes/wpremix2/images/navi';

if(img_name == "/wp-content/themes/wpremix2/images/navi/2.jpg") {

document.getElementById("content-text2").style.marginTop = '50px';

}

else {

document.getElementById("content-text2").style.paddingTop = '0px';

}

t.src = img_path + '/' + img_name;

}

</script>

<div id="content-text2">

<a href="/kontakt"><img src="schrift2.png" onMouseOver="changeImage(this, '2.jpg')" onMouseOut="changeImage(this, 'schrift2.jpg')"; /></a>

</div>

</div>

[ZuVieL]

mach ich was faslch? kannst du hier mal drüber schauen?

<div id="content-text">

<div id="content-text1"><a href="/kontakt"><img onmouseover="this.src='/wp-content/themes/wpremix2/images/navi/1.jpg';" onmouseout="this.src='/wp-content/themes/wpremix2/images/navi/schrift1.png';" src="/wp-content/themes/wpremix2/images/navi/schrift1.png" alt="" /></a></div>

<script>

function changeImage(t, img_name) {

img_path = '/wp-content/themes/wpremix2/images/navi';

if(img_name == "/wp-content/themes/wpremix2/images/navi/2.jpg") {

document.getElementById("content-text2").style.marginTop = '50px';

}

else {

document.getElementById("content-text2").style.paddingTop = '0px';

}

t.src = img_path + '/' + img_name;

}

</script>

<div id="content-text2">

<a href="/kontakt"><img src="schrift2.png" onMouseOver="changeImage(this, '2.jpg')" onMouseOut="changeImage(this, 'schrift2.jpg')"; /></a>

</div>

</div>

verstehe nicht ganz was du da vor hast...

erkläre nochmal genau was du haben möchtest.

[=o-n-e=]

oben habe ich einen link gepostet wo mir seine navigaton sehr gut gefällt, ich hab dir maleine pn geschickt vielleicht ist es dann deutlicher...

[netsation]

Also ich ein Link zu deiner Seite würde vielleicht helfen, dann kann man sich da mal den Code anschauen und vielleicht besser helfen.

Grüße

[=o-n-e=]

ZuVieL hat mir sehr gut per PN geholfen und mir gezeigt wie ich so etwas per Image map löse

Vielen Dank

[=o-n-e=]

Hallo,

Nachdem ich die Navigation nun vor einiger Zeit fertig gestellt habe möchte ich diese etwas verändern!

zwar möchte ich nun mehrere Punkte durchlaufen lassen und dachte mir ich löse es so!

<div id="content-beide"><img id="t_imagemap" usemap="#tmp"  src="/wp-content/themes/wpremix2/images/navi/1.jpg" border="0" alt="" />


<map id="tmp" name="tmp"> 

<area shape="poly" coords="3,2,4,78,369,77,369,7"	href="/mos" target="_self" onMouseOver="changeImage(this, '1.jpg' );changeAutoImage=0;" onMouseOut="changeImage(this, '1.jpg');changeAutoImage=1;">

<?php if 0 == 1) { ?>

	<area shape="poly" coords="2,91,3,158,367,159,369,95"	href="/partner" target="_self" onMouseOver="changeImage(this, '2.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '2.jpg');changeAutoImage=1;">

<?php } else { ?>

	<area shape="poly" coords="2,91,3,158,367,159,369,95"	href="/hyper" target="_self" onMouseOver="changeImage(this, '4.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '4.jpg');changeAutoImage=4.jpg;"></map></div>

<?php } ?>

<area shape="poly" coords="4,176,8,250,366,239,364,182"	href="/portal" target="_self" onMouseOver="changeImage(this, '3.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '3.jpg');changeAutoImage=1;">

</div>[/PHP]

allerdings funktioniert der PhP code nicht in der Imagemap?! warum nicht?

vielen dank

[ben-kla]

Versuchs mal so... habs nicht getestet aber eigendlich sollte der PHP code so gehen auch wenn ich if(0 == 1) nicht ganz verstehe, da 0 ja nie 1 sein kann

<div id="content-beide"><img id="t_imagemap" usemap="#tmp"  src="/wp-content/themes/wpremix2/images/navi/1.jpg" border="0" alt="" />


<map id="tmp" name="tmp"> 

<area shape="poly" coords="3,2,4,78,369,77,369,7"    href="/mos" target="_self" onMouseOver="changeImage(this, '1.jpg' );changeAutoImage=0;" onMouseOut="changeImage(this, '1.jpg');changeAutoImage=1;">

<?php if(0 == 1) {

print"<area shape="poly" coords="2,91,3,158,367,159,369,95"    href="/partner" target="_self" onMouseOver="changeImage(this, '2.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '2.jpg');changeAutoImage=1;">";

} else {

print"<area shape="poly" coords="2,91,3,158,367,159,369,95"    href="/hyper" target="_self" onMouseOver="changeImage(this, '4.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '4.jpg');changeAutoImage=4.jpg;"></map></div>";

} ?>

<area shape="poly" coords="4,176,8,250,366,239,364,182"    href="/portal" target="_self" onMouseOver="changeImage(this, '3.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '3.jpg');changeAutoImage=1;">

</div>[/PHP]

MFG Ben-kla

[=o-n-e=]

danke, hab aber grade bemerkt das ich ein kleinen denk fehler hatte.

ich müsse zwischen 2 imagemaps wechseln.

so irgendwie:

<div id="content-beide"><img id="t_imagemap" usemap="#tmp"  src="/wp-content/themes/wpremix2/images/navi/1.jpg" border="0" alt="" />


<?php if (rand(0, 1) == 0) {?>

<map id="tmp" name="tmp"> 

<area shape="poly" coords="3,2,4,78,369,77,369,7"	href="/mos" target="_self" onMouseOver="changeImage(this, '1.jpg' );changeAutoImage=0;" onMouseOut="changeImage(this, '1.jpg');changeAutoImage=1;">

<area shape="poly" coords="2,91,3,158,367,159,369,95"	href="/partner" target="_self" onMouseOver="changeImage(this, '2.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '2.jpg');changeAutoImage=1;">

<area shape="poly" coords="4,176,8,250,366,239,364,182"	href="/portal" target="_self" onMouseOver="changeImage(this, '3.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '3.jpg');changeAutoImage=1;"></map></div>

<map id="tmp" name="tmp"> 

<?php } else { ?>

<area shape="poly" coords="2,91,3,158,367,159,369,95"	href="/hyper" target="_self" onMouseOver="changeImage(this, '4.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '4.jpg');changeAutoImage=4.jpg;">

<area shape="poly" coords="2,91,3,158,367,159,369,95"	href="/news" target="_self" onMouseOver="changeImage(this, '5.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '5.jpg');changeAutoImage=4;">

<area shape="poly" coords="4,176,8,250,366,239,364,182"	href="/event" target="_self" onMouseOver="changeImage(this, '6.jpg');changeAutoImage=0;" onMouseOut="changeImage(this, '6.jpg');changeAutoImage=4;"></map></div>


<?php } ?>[/PHP]

entweder die erste mit 3 logos oder die andere mit 3 anderen logos und unterschiedlichen links!

[ben-kla]

welcher teil deines Codes geht denn nicht / tut nichts.

MFG Ben-kla

Bearbeitet 14. Mai 2009 von ben-kla

[Vandahil]

Steht die Seite online, damit man sich das ganze mal ansehen kann?

greetz

[=o-n-e=]

ich bekomme immer ein

Parse error: syntax error, unexpected '<

das liegt am <?php

wenn ich es aber so schreibe

 interpretiert er die if anweisung nicht?!

[ben-kla]

versuchs mal so

an einer stelle stand anstatt changeAutoImage=4; changeAutoImage=4.jpg;

habe keine fehler mehr bekommen mit dem debugger meines editors

auserdem habe ich noch im div block einen / entfernt der am ende stand

<div id="content-beide"><img id="t_imagemap" usemap="#tmp"  src="/wp-content/themes/wpremix2/images/navi/1.jpg" border="0" alt="">

<?php if (rand(0, 1) == 0){

print"

<map id=\"tmp\" name=\"tmp\">

<area shape=\"poly\" coords=\"3,2,4,78,369,77,369,7\"    href=\"/mos\" target=\"_self\" onMouseOver=\"changeImage(this, '1.jpg' );changeAutoImage=0;\" onMouseOut=\"changeImage(this, '1.jpg');changeAutoImage=1;\">

<area shape=\"poly\" coords=\"2,91,3,158,367,159,369,95\"    href=\"/partner\" target=\"_self\" onMouseOver=\"changeImage(this, '2.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '2.jpg');changeAutoImage=1;\">

<area shape=\"poly\" coords=\"4,176,8,250,366,239,364,182\"    href=\"/portal\" target=\"_self\" onMouseOver=\"changeImage(this, '3.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '3.jpg');changeAutoImage=1;\"></map></div>

<map id=\"tmp\" name=\"tmp\">";

}

else{

print"

<area shape=\"poly\" coords=\"2,91,3,158,367,159,369,95\"    href=\"/hyper\" target=\"_self\" onMouseOver=\"changeImage(this, '4.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '4.jpg');changeAutoImage=4;\">

<area shape=\"poly\" coords=\"2,91,3,158,367,159,369,95\"    href=\"/news\" target=\"_self\" onMouseOver=\"changeImage(this, '5.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '5.jpg');changeAutoImage=4;\">

<area shape=\"poly\" coords=\"4,176,8,250,366,239,364,182\"    href=\"/event\" target=\"_self\" onMouseOver=\"changeImage(this, '6.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '6.jpg');changeAutoImage=4;\"></map></div>";

}[/PHP]

[=o-n-e=]

erstma vielen dank, habs dank eurer hilfe nun hinbekommen!

<?php if (rand(0, 1) == 0){

print'<img id="t_imagemap" usemap="#tmp"  src="/wp-content/themes/wpremix2/images/navi/1.jpg" border="0" alt="">';

print"

<map id=\"tmp\" name=\"tmp\">

<area shape=\"poly\" coords=\"3,2,4,78,369,77,369,7\"    href=\"/microsoft-online-services\" target=\"_self\" onMouseOver=\"changeImage(this, '1.jpg' );changeAutoImage=0;\" onMouseOut=\"changeImage(this, '1.jpg');changeAutoImage=1;\">

<area shape=\"poly\" coords=\"2,91,3,158,367,159,369,95\"    href=\"/partnerschaften\" target=\"_self\" onMouseOver=\"changeImage(this, '2.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '2.jpg');changeAutoImage=1;\">

<area shape=\"poly\" coords=\"4,176,8,250,366,239,364,182\"    href=\"/portale\" target=\"_self\" onMouseOver=\"changeImage(this, '3.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '3.jpg');changeAutoImage=1;\"></map></div>

<map id=\"tmp\" name=\"tmp\">";

}

else{

print'<img id="t_imagemap" usemap="#tmp"  src="/wp-content/themes/wpremix2/images/navi/4.jpg" border="0" alt="">';

print"


<area shape=\"poly\" coords=\"2,91,3,158,367,159,369,95\"    href=\"/hyperv\" target=\"_self\" onMouseOver=\"changeImage(this, '4.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '4.jpg');changeAutoImage=4;\">

<area shape=\"poly\" coords=\"2,91,3,158,367,159,369,95\"    href=\"/news\" target=\"_self\" onMouseOver=\"changeImage(this, '5.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '5.jpg');changeAutoImage=4;\">

<area shape=\"poly\" coords=\"4,176,8,250,366,239,364,182\"    href=\"/events\" target=\"_self\" onMouseOver=\"changeImage(this, '6.jpg');changeAutoImage=0;\" onMouseOut=\"changeImage(this, '6.jpg');changeAutoImage=4;\"></map></div>";

}[/PHP]

nun zum nächsen problem, ich hatte es immer so das ich im header eine abfrage habe welches die bilder automatisch durchscrollt.

NUn müsste der header ja erstma abfragen welche von den beiden imagemaps angezeigt wird als if oder else und anschließend dementsprechend die bilder durchscrollen!

mein alter code:

[PHP]<script language="javascript">
<!--
var time = 5000 //Zeit fur den Bildewechsel
var bild = new Array();
bild[0] = "/wp-content/themes/wpremix2/images/navi/1.jpg";
bild[1] = "/wp-content/themes/wpremix2/images/navi/2.jpg";
bild[2] = "/wp-content/themes/wpremix2/images/navi/3.jpg";

var narf = "0";
var changeAutoImage = 1;

function bildwechseln() {
if(changeAutoImage == 1) {
document.getElementById("t_imagemap").src = bild[narf];
narf++;
if (narf == bild.length) {
narf = 0;
}
}
setTimeout("bildwechseln()",time);
}

-->
</script>

<BODY onLoad="bildwechseln()">