Zum Inhalt springen

Navigation mit MOuseover

=o-n-e=

Von =o-n-e=
in Webdesign

 Teilen

Empfohlene Beiträge

=o-n-e=

=o-n-e=

Geschrieben
  • Autor
Geschrieben

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

bytebrain

Geschrieben
Geschrieben

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=

=o-n-e=

Geschrieben
  • Autor
Geschrieben 

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

ZuVieL

Geschrieben
Geschrieben 


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

=o-n-e=

Geschrieben
  • Autor
Geschrieben

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

ZuVieL

Geschrieben
Geschrieben
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=

=o-n-e=

Geschrieben
  • Autor
Geschrieben

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

  • 2 Wochen später...
  • 1 Monat später...
=o-n-e=

=o-n-e=

Geschrieben
  • Autor
Geschrieben

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

ben-kla

Geschrieben
Geschrieben

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=

=o-n-e=

Geschrieben
  • Autor
Geschrieben

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!

=o-n-e=

=o-n-e=

Geschrieben
  • Autor
Geschrieben

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

ben-kla

Geschrieben
Geschrieben

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=

=o-n-e=

Geschrieben
  • Autor
Geschrieben

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

Erstelle ein Benutzerkonto oder melde Dich an, um zu kommentieren

Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können

Benutzerkonto erstellen

Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!

Neues Benutzerkonto erstellen

Anmelden

Du hast bereits ein Benutzerkonto? Melde Dich hier an.

Jetzt anmelden
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...