Navigation mit MOuseover

=o-n-e= · 11. März 2009

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 · 16. März 2009

Mit JavaScript.

SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)

Nötige JavaScript Befehle:

- getElementById

- src (image)

- function

HTML:

- div

- onMouseOver

=o-n-e= · 20. März 2009

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

bytebrain · 23. März 2009

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= · 23. März 2009

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

ZuVieL · 23. März 2009


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

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

}

=o-n-e= · 23. März 2009


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';

}

ZuVieL · 23. März 2009


<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= · 23. März 2009

das onmouseover bild wird nicht angezeigt?

ZuVieL · 23. März 2009

ja dann hat sich wohl ein fehler eingeschlichen

=o-n-e= · 23. März 2009

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

ZuVieL · 23. März 2009

dann kann ich dir auch nicht helfen,

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

=o-n-e= · 23. März 2009

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>

ZuVieL · 23. März 2009

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= · 23. März 2009

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 · 24. März 2009

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= · 2. April 2009

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= · 14. Mai 2009

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 · 14. Mai 2009

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= · 14. Mai 2009

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 · 14. Mai 2009

welcher teil deines Codes geht denn nicht / tut nichts.

MFG Ben-kla

Bearbeitet 14. Mai 2009 von ben-kla

Vandahil · 14. Mai 2009

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

greetz

=o-n-e= · 14. Mai 2009

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 · 14. Mai 2009

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= · 15. Mai 2009

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

Navigation mit MOuseover

Empfohlene Beiträge

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte