Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag30.06.2007 um 06:15 (UTC)    
Titel: Hover-Effekt beim Bild OFFEN NOCH!!

Welchen Code muss ich bentzen, wenn man auf einen Button draufklickt, dass ein anderes Bild darauf erscheint.?? mein bilder heißen: orange.druck.gif und orange.gif . Das muss beim nicht drücken sichtbar sein: orange.gif
______________
Signatur entfernt von Support-Team
Bitte die Größe von 650 x 150 einhalten !


Zuletzt bearbeitet von christophkoerner am 30.06.2007, 10:40, insgesamt 3-mal bearbeitet
Beitrag30.06.2007 um 06:43 (UTC)    
Titel: Re: Bild beim klicken ändern ...

christophkoerner hat Folgendes geschrieben:
Welchen Code muss ich bentzen, wenn man auf einen Button draufklickt, dass ein anderes Bild darauf erscheint.?? mein bilder heißen: orange.druck.gif und orange.gif . Das muss beim nicht drücken sichtbar sein: orange.gif


meinst du in der navi der Hover effekt?
______________
Marco Oliveira
www.Geldleicht.de.tl
www.MP-Design.de.tl
<strong>ich existiere nur noch als ICQ Seele</strong>
[img:f02fbe788d]http://img.webme.com/pic/p/pazox/mpforumbanner.jpg[/img:f02fbe788d]
Beitrag30.06.2007 um 06:49 (UTC)    
Titel:

hier das: http://easyhost.extra.hu/img/1183116771.jpg


das oberste Menü hab ich mit Banner. Ich will, dass wenn man draufklickt ein anderes bild erscheint. wie bei wolle im Menü nur das bild ändert sich beim draufklicken. Wink im oberen Menü.
______________
Signatur entfernt von Support-Team
Bitte die Größe von 650 x 150 einhalten !


Zuletzt bearbeitet von christophkoerner am 30.06.2007, 07:53, insgesamt 2-mal bearbeitet
Beitrag30.06.2007 um 09:39 (UTC)    
Titel:

Wenn du ein Sogenantes "Cool Menu" meinst das unter dem Header ist, ist hier der Code:

Zitat:
<style type="text/css" media="screen">
<!--
body
{
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
padding: 10px;
margin: 0px;
}

ul, li
{
list-style-type: none;
padding: 0px;
margin: 0px;
}

li a
{
padding-right: 20px;padding-top: 5px;
}

div.menu
{
position: absolute;
z-index: 3;
top: 124px;
left: 50%;
margin-left:-405px;
width:905px;
}

.menu li
{
width: 160px;
float: left;
}

.menu a
{
border: 0px solid #000000;
background-color: #000000;
background-image: url(URL);
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 23px;
color: #00CCFF;
}

.menu a:hover
{
background-color: #00CCFF;
background-image: url(URL);
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px;
display: none;
width: 160px;
float: left;
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold;
padding-top: 5px;
border-top: 0px;
cursor: pointer;
color: #FFFFFF;
}
//-->

</style>

<script type="text/javascript">
<!--
function montre(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'block';
else if (all)
all[id].style.display = 'block';
else
layers[id].display = 'block';
}
}

function cache(id)
{
with (document)
{
if (getElementById)
getElementById(id).style.display = 'none';
else if (all)
all[id].style.display = 'none';
else
layers[id].display = 'none';
}
}
//-->
</script>



<div class="menu">

<li><a href="javascript:void(0);" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">Menupunkt1</a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">

<li><a href="http://Menupunkt1.1.htm">Menupunkt1.1</a></li>
<li><a href="http://Menupunkt1.2.htm">Menupunkt1.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menupunkt2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">

<li><a href="http://Menupunkt2.1.htm">Menupunkt2.1</a></li>
<li><a href="http://Menupunkt2.2.htm">Menupunkt2.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">Menupunkt3</a>
<ul id="smenu3" onmouseover="montre('smenu3');" onmouseout="cache('smenu3');">

<li><a href="http://Menupunkt3.1.htm">Menupunkt3.1</a></li>
<li><a href="http://Menupunkt3.2.htm">Menupunkt3.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">Menupunkt4</a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">

<li><a href="http://Menupunkt4.1.htm">Menupunkt4.1</a></li>
<li><a href="http://Menupunkt4.2.htm">Menupunkt4.2</a></li>

</ul>
</li>

<li><a href="javascript:void(0);" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">Menupunkt5</a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">

<li><a href="http://Menupunkt5.1.htm">Menupunkt5.1</a></li>
<li><a href="http://Menupunkt5.2.htm">Menupunkt5.2</a></li>

</ul>
</li>

</div>




Erklärungen

body
{
font-family: Verdana, sans-serif; Schriftart
font-size: 14px; Schriftgröße
overflow: auto; Anzeige des Inhalts, falls zu groß
padding: 10px; Abstand des Menüs nach allen Richtungen
margin: 0px; Abstand des Menüs nach allen Richtungen
}

ul, li
{
list-style-type: none; Aufzählungszeichen (hier: nein)
padding: 0px; Abstand des Menüs nach allen Richtungen
margin: 0px; Abstand des Menüs nach allen Richtungen
}

li a
{
padding-right: 20px;padding-top: 5px; Ausrichtung der Schrift: -right = Abstand nach rechts, -top = Abstand nach oben
}

div.menu
{
position: absolute; Absolute Positionierung
z-index: 3; Priorität der Buttons (1 = werden unter Bilder auf den Textseiten gezeigt, 3 = werden über Bilder auf Textseiten gezeigt

[empfohlen])
top: 124px; Abstand des Coolmenüs nach oben
left: 50%; Ausrichtung des Coolmenüs (50% = zentriert)
margin-left:-405px; Abstand des Coolmenüs nach rechts auf dem Bildschirm
width:900px; Breite des gesamten Coolmenüs (z.B. 5x160px=900px)
}

.menu li
{
width: 160px; Breite der Menüs
float: left; Schriftfluss
}

.menu a
{
border: 0px solid #000000; Breite, Art und Farbe des Rahmens der Menüs
background-color: #000000; Hintergrundfarbe der normalen Buttons
background-image: url(URL); Hintergrundbild der normalen Buttons
text-decoration: none; Schriftattribute der Menüs
text-align: center; Ausrichtung der Schrift der Menüs
font-weight: bold; Schriftstärke der Menüs
cursor: pointer; Mauszeigerart auf den Menüs
margin: 0px; Abstand der Schrift nach allen Seiten zum Rand der Menüs
display: block; Anzeige der Menüpunkte (block: Menüpunkte werden untereinander angezeigt, Element erzeugt neue Zeile)
height: 23px; Höhe der Menübuttons
color: #00CCFF; Schriftfarbe der Menüs
}

.menu a:hover
{
background-color: #00CCFF; Hintergrundfarbe der Hoverbuttons
background-image: url(URL); Hintergrundbild der Hoverbuttons
}

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
font-size: 14px; Schriftgröße der Untermenüs
display: none; Normale Anzeige der Menüpunkte
width: 160px; Breite der Untermenüs
float: left; Schriftfluss
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
font-weight: bold; Schriftstärke der Untermenüs
padding-top: 5px; Abstand der Schrift der Untermenüs nach oben
border-top: 0px; Definierung oberer Rahmen
cursor: pointer; Mauszeigerart auf den Untermenüs
color: #FFFFFF; Schriftfarbe der Untermenüs
}


Definierung der URL's/Adressen der Menüpunkte

Zitat:
<li><a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menupunkt2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">

<li><a href="http://Menupunkt2.1.htm">Menupunkt2.1</a></li>
<li><a href="http://Menupunkt2.2.htm">Menupunkt2.2</a></li>

</ul>
</li>


<li>
Leitet einen neuen Menüpunkt ein

<ul><li>
Leitet einen neuen Untermenüpunkt ein

<a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menupunkt2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
Rot: Menüpunkt Titel, Zahlen: Definierung des Menüpunktes und die Untermenüs dieses Punktes (mehr dazu im nächsten Punkt)

<li><a href="http://Menupunkt2.1.htm">Menupunkt2.1</a></li>
<li><a href="http://Menupunkt2.2.htm">Menupunkt2.2</a></li>
http://Menupunkt2.1.htm: Adresse des Menüpunktes, Menupunkt2.2: Titel des Menüpunktes

Anstatt einens Menüpunktes mit Untermenüs kann auch ein Punkt ohne Untermenüs erstellt werden (Das rote durch das grüne ersetzen):

Zitat:
<a href="javascript:void(0);" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">Menupunkt2</a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">


Zitat:
<li><a href="http://Menupunkt2.1.htm">Menupunkt2.1</a></li>


#smenu1, #smenu2, #smenu3, #smenu4, #smenu5
{
[...]
}

#smenu1 a, #smenu2 a, #smenu3 a, #smenu4 a, #smenu5 a
{
[...]
}
Anzahl der verschiedenen Menüpunkte (2 Menüpunkte = #smenu1, #smenu2; 3 Menüpunkte = #smenu1, #smenu2, #smenu3 usw.)




MfG Emi
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de