Navigation mit MOuseover

Veröffentlicht 11. März 200916 j

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

16. März 200916 j

Mit JavaScript.

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Nötige JavaScript Befehle:

- getElementById

- src (image)

- function

HTML:

- div

- onMouseOver

20. März 200916 j

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>

danke

23. März 200916 j

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

23. März 200916 j

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

23. März 200916 j


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

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

}

23. März 200916 j


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>

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

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

}

23. März 200916 j


<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..

23. März 200916 j

das onmouseover bild wird nicht angezeigt?

23. März 200916 j

ja dann hat sich wohl ein fehler eingeschlichen

23. März 200916 j

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

23. März 200916 j

dann kann ich dir auch nicht helfen,

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

23. März 200916 j

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

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>

23. März 200916 j

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.

23. März 200916 j

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...

24. März 200916 j

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

2. April 200916 j

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

Vielen Dank

14. Mai 200916 j

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

14. Mai 200916 j

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

14. Mai 200916 j

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!

14. Mai 200916 j

welcher teil deines Codes geht denn nicht / tut nichts.

MFG Ben-kla

Bearbeitet 14. Mai 200916 j von ben-kla

14. Mai 200916 j

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

greetz

14. Mai 200916 j

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?!

14. Mai 200916 j

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]

15. Mai 200916 j

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">

</script>

<BODY onLoad="bildwechseln()">

Anmelden

Themen

Assistance Finance-IT Specialist / Consultant (m/w/d) – Accounting, Payroll & Compliance bei Linn Goppold Treuhand GmbH (80804 München-Schwabing-West, Deutschland)

IT-Sachbearbeiter (m/w/d) für unser Amt für IT und Digitalisierung bei Stadtverwaltung Leonberg (71229 Leonberg-Eltingen, Deutschland)

Projektmanager (w/m/d) Product Lifecycle and Data Management Systems bei B. Braun Melsungen AG (34212 Melsungen, Deutschland)

Navigation mit MOuseover

Empfohlene Antworten

Archiv

Konto

Navigation

Suchen

Configure browser push notifications

Chrome (Android)

Chrome (Desktop)

Safari (iOS 16.4+)

Safari (macOS)

Edge (Android)

Edge (Desktop)

Firefox (Android)

Firefox (Desktop)