Suche im Forum:
Suchen


Autor Nachricht
Beitrag25.12.2010 um 14:11 (UTC)    
Titel: Iceblue: Coolmenü mit eigenen Buttons: Hovereffekt???

Hi Smile
ich hab mir ein coolmenü erstellt und für die Links eigene buttons genommen, für die ich jetzt noch gerne einen hover effekt haben würde, nur leider hab ich keine ahnung wie und alle meine versuche sind scheif gelaufen -.- Very Happy

Hier ist mein Code
Code:
<style type="text/css" media="screen">
<!--
/* Allgemeine Einstellungen (Schriftart, Schriftgröße...) */
body {
font-family: Verdana, sans-serif;
font-size: 14px;
overflow: auto;
margin: 0px; }

/* keine Auflistungspunkte vor Navi-Links */
ul, li {
list-style-type: none;
padding: 0px;
margin: 0px; }

/* Abstand zwischen Schrift zum Rand */
li a {
padding-right: 20px;
padding-top: 5px; }

/* Coolmenü positionieren, Werte bei "top" , "left" und "width" anpassen */
div.menu {
position: absolute;
left: 50%;
top: 548px;
margin-left: -462px;
width: 921px; }

/* Breite der Menüpunkte einstellen */
.menu li {
width: 130px;
float: left; }

/* Aussehen der Menüpunkte einstellen */
.menu a {
border: 0px solid #FFFFFF;
background-color: #FFFFFF;
background-image: url();
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height: 20px;
color: #FFFFFF; }

/* Aussehen der Menüpunkte beim Hover Effekt */
.menu a:hover {
background-color: #FFFFFF;
background-image: url();
color: #FFFFFF; }

#smenu1, #smenu2, #smenu3, #smenu4, #smenu5 {
font-size: 14px;
display: none;
width: 100px;
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>

<!-- Anfang des Scriptes -->
<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>
<!-- Ende des Scriptes -->

<div class="menu">
<li><a href="http://benkowalewicz-tribute.de.tl/news.htm " target="_self"><img src="http://img.webme.com/pic/b/benkowalewicz-tribute/cmnews.jpg" alt=""></a></a>
<ul id="smenu1" onmouseover="montre('smenu1');" onmouseout="cache('smenu1');">
</ul>
</li>
<li><a href="http://benkowalewicz-tribute.de.tl/about.htm " target="_self"><img src="http://img.webme.com/pic/b/benkowalewicz-tribute/cmabout.jpg" alt=""></a></a>
<ul id="smenu2" onmouseover="montre('smenu2');" onmouseout="cache('smenu2');">
</a></li>
</ul>
</li>
<li><a href="http://benkowalewicz-tribute.de.tl/music.htm " target="_self"><img src="http://img.webme.com/pic/b/benkowalewicz-tribute/cmmusic.jpg" alt=""></a></a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
</ul>
</li>
<li><a href="http://benkowalewicz-tribute.de.tl/gallery.htm " target="_self"><img src="http://img.webme.com/pic/b/benkowalewicz-tribute/cmgallery.jpg" alt=""></a></a>
<ul id="smenu4" onmouseover="montre('smenu4');" onmouseout="cache('smenu4');">
</ul>
</li>
<li><a href="http://benkowalewicz-tribute.de.tl/media.htm" target="_self"><img src="http://img.webme.com/pic/b/benkowalewicz-tribute/cmmedia.jpg" alt=""></a></a>
<ul id="smenu5" onmouseover="montre('smenu5');" onmouseout="cache('smenu5');">
</ul>
</li>
<li><a href="http://benkowalewicz-tribute.de.tl/www.htm" target="_self"><img src="http://img.webme.com/pic/b/benkowalewicz-tribute/cmwww.jpg" alt=""></a></a>
<ul id="smenu6" onmouseover="montre('smenu6');" onmouseout="cache('smenu5');">
</ul>
</li>
<li><a href="http://benkowalewicz-tribute.de.tl/seite.htm" target="_self"><img src="http://img.webme.com/pic/b/benkowalewicz-tribute/cmseite.jpg" alt=""></a></a>
<ul id="smenu7" onmouseover="montre('smenu7');" onmouseout="cache('smenu7');">
</ul>
</li>

</div>


Ich hoffe mir kann irgendjemand helfen!!
tausend dank
LG und schöne feiertage
______________
some people believe in god, i believe in music.
some people pray, i turn up the radio.
Beitrag25.12.2010 um 14:14 (UTC)    
Titel:

Also ich hab es so und benutze auch Iceblue

Code:
td.nav:hover {background-image: url(Hier Button-URL); }


Zuletzt bearbeitet von andreaskrenn am 25.12.2010, 15:16, insgesamt einmal bearbeitet
Beitrag25.12.2010 um 18:17 (UTC)    
Titel:

Aber ist das nicht allgemein für den kover eines navibuttons ?
ich habe ein coolmenü und will für jeden einzelnen button einen eigenen hovereffekt....
?? Very Happy
trotzdem tausend dank für die antwort Smile)
______________
some people believe in god, i believe in music.
some people pray, i turn up the radio.
Beitrag25.12.2010 um 18:33 (UTC)    
Titel:

Heyo

Ich bin mir nicht sicher ob das realisierbar ist aber einfach ist es mit dem Iceblue Design nicht.

Da solltest du schon ein CSS Design haben. Da würde ich eine Idee haben.


Mein Vorschlag wäre:

Wenn du bei jedem Button am Coolmenü einen anderen Hovereffekt hast, wirkt es sehr kindisch. Mach doch bei allen Buttons einen einfach Farbwechsel Very Happy
______________
Mit freundlichen Grüßen
Ray-Line

# Habe ich einer deiner Fragen beantworten können?
>> Dann mach doch auf meiner Seite (ray-line.de.tl) einen GB-Eintrag oder verlinke meinen Banner auf deiner Homepage.
Beitrag25.12.2010 um 22:36 (UTC)    
Titel:

Ich denke, ich lasse es einfach so Very Happy

aber ich denke nicht, dass es kindisch ist.. ich will ja nicht bei dem einen dann einen pinken button und bei dem daneben einen knallgrünen Very Happy sondern einfach, dass die schrift, die auf dem einen ist (die hab ich jedoch mit photoshop gemacht, der button is ein jpegbild), dann eine andere farbe hat Very Happy die farbe ist überall gleich, aber das wort eben nicht Very Happy falls du irgendwie verstehst,was ich hier blubber Very Happy aber ist auch nciht so tragisch, ohne hover ghets auch Smile trotzdem danke an dich Smile)
______________
some people believe in god, i believe in music.
some people pray, i turn up the radio.
Beiträge der letzten Zeit anzeigen:   


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