Regeln und nützliche Hinweise
E-Mail-Adressen dürfen nicht veröffentlicht werden!
Lexi Help
Die neuesten Themen
» Herzlichen Dank
von Stephan68 Heute um 17:51

» [phpBB2] 3. Modul Kolonne in Mitgliederliste gerutscht
von Dr.Keks Heute um 12:46

» [phpBB2] Link vom Unterforum ansprechen
von Fiona Heute um 12:34

» [S-H-F] Dr. Keks Sprechstunde
von Dr.Keks Heute um 12:10

» [phpBB2] mein persönliches CSS geht nicht mehr
von Marcel´s Schnatterbude Heute um 9:40

» Passwort lässt sich nicht zurücksetzen
von inde Gestern um 0:56

» REGELN IM SUPPORTBEREICH
von Forumbot So 19 Feb 2017 - 17:17

» REGELN IM SUPPORTBEREICH
von Forumbot So 19 Feb 2017 - 17:16

» REGELN IM SUPPORTBEREICH
von Forumbot So 19 Feb 2017 - 17:15

» REGELN IM SUPPORTBEREICH
von Forumbot So 19 Feb 2017 - 17:14

» REGELN IM SUPPORTBEREICH
von Forumbot So 19 Feb 2017 - 17:13

» REGELN IM SUPPORTBEREICH
von Forumbot So 19 Feb 2017 - 17:12

» [phpBB2] Forum "lädt sich tot"
von inde So 19 Feb 2017 - 10:38

» [phpBB2] Navigationsmenü plötzlich abgehoben
von Dr.Keks Sa 18 Feb 2017 - 19:26

» [PunBB] Beiträge werden nach ca 250 Zeichen abgeschnitten
von inde Sa 18 Feb 2017 - 15:45

» Keine Zugangsdaten zu Forum/ Zugangsdaten verloren gegangen
von Bigtuber Sa 18 Feb 2017 - 12:15

Partner
www.forumieren.de

Hover in den Index Modulen

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Hover in den Index Modulen

Beitrag von Aiko-Chan am So 11 Jul 2010 - 11:21

Ich hoffe dass mir jemand weiterhelfen kann...
In meinem Forum benutze ich in der Navigation durch CSS-Codes die Hover Funktion (d.h. Navi Button ändert sich wenn man mit dem Cursor drüber geht). Ich wollte nun fragen, ob es auch möglich ist so einen Code für Bilder in den Index Modulen zu verwenden. Weil ich mich mit dem Zeugs aber nicht besonders auskenne, wüsste ich nicht wie ich den Code ändern müsste damit es klappt...

Für die Navi hab ich folgende Codes benutzt:

Code:
#i_icon_mini_index
{
background-image: url(http://img443.imageshack.us/img443/2413/iiconminiindexax.png);
width: 112px;
height: 46px;
}
#i_icon_mini_index:hover
{
background-image: url(http://img708.imageshack.us/img708/2441/kopievoniiconminiindex.png);
width: 112px;
height: 46px;
}

#i_icon_mini_faq
{
background-image: url(http://hitskin.com/themes/15/84/05/i_icon_mini_faq.png);
width: 98px;
height: 46px;
}
#i_icon_mini_faq:hover
{
background-image: url(http://img707.imageshack.us/img707/6808/kopievoniiconminifaq.png);
width: 98px;
height: 46px;
}

#i_icon_mini_search
{
background-image: url(http://hitskin.com/themes/15/84/05/i_icon_mini_search.png);
width: 88px;
height: 46px;
}
#i_icon_mini_search:hover
{
background-image: url(http://img696.imageshack.us/img696/2079/kopievoniiconminisearch.png);
width: 88px;
height: 46px;
}

#i_icon_mini_members
{
background-image: url(http://hitskin.com/themes/15/84/05/i_icon_mini_members.png);
width: 72px;
height: 46px;
}
#i_icon_mini_members:hover
{
background-image: url(http://img248.imageshack.us/img248/2888/kopievoniiconminimember.png);
width: 72px;
height: 46px;
}

#i_icon_mini_groups
{
background-image: url(http://hitskin.com/themes/15/84/05/i_icon_mini_groups.png);
width: 104px;
height: 46px;
}
#i_icon_mini_groups:hover
{
background-image: url(http://img688.imageshack.us/img688/4559/kopievoniiconminigroups.png);
width: 104px;
height: 46px;
}

#i_icon_mini_profile
{
background-image: url(http://hitskin.com/themes/15/84/05/i_icon_mini_profile.png);
width: 76px;
height: 46px;
}
#i_icon_mini_profile:hover
{
background-image: url(http://img69.imageshack.us/img69/6920/kopievoniiconminiprofil.png);
width: 76px;
height: 46px;
}

#i_icon_mini_message
{
background-image: url(http://hitskin.com/themes/15/84/05/i_icon_mini_message.png);
width: 141px;
height: 46px;
}
#i_icon_mini_message:hover
{
background-image: url(http://img130.imageshack.us/img130/8890/kopievoniiconminimessag.png);
width: 141px;
height: 46px;
}

#i_icon_mini_login
{
background-image: url(http://img340.imageshack.us/img340/4463/kopievoniiconminilogin.png);
width: 108px;
height: 46px;
}
#i_icon_mini_login:hover
{
background-image: url(http://img638.imageshack.us/img638/6619/kopievonkopievoniiconmi.png);
width: 108px;
height: 46px;
}

#i_icon_mini_logout
{
background-image: url(http://img291.imageshack.us/img291/2694/kopievoniiconminilogout.png);
width: 108px;
height: 46px;
}
#i_icon_mini_logout:hover
{
background-image: url(http://img717.imageshack.us/img717/6619/kopievonkopievoniiconmi.png);
width: 108px;
height: 46px;
}


Was müsste ich nun für z.B. #i_icon_mini_logout einfügen, um ein Bild im Index Modul mit dem Hover Effekt zu versehen? Ich bräuchte also nur Hilfe beim "Titel" der Codes.

Aiko-Chan
Stammgast
Stammgast

Weiblich Beiträge : 247
Anmeldedatum : 27.06.10
keine
phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Hover in den Index Modulen

Beitrag von Aiko-Chan am So 11 Jul 2010 - 15:45

Ich glaub die Sache hat sich erledigt, hab was passendes gefunden ~

Aiko-Chan
Stammgast
Stammgast

Weiblich Beiträge : 247
Anmeldedatum : 27.06.10
keine
phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Hover in den Index Modulen

Beitrag von Zuckerpuppe am So 11 Jul 2010 - 15:51

ich habe da noch eine andere Lösung...wie ich sehe, hast du jetzt nur Links eingefügt...


Dazu musst du eine neue ID erstellen, diese ins Modul einsetzen und dann übers CSS definieren..


Das ergibt dann einen Effekt, den du dir in meinem Forum mal anschauen kannst...Bilder, Farben, etc. musst du natürlich noch ändern Wink


Zuletzt von Zuckerpuppe am Mo 12 Jul 2010 - 9:11 bearbeitet; insgesamt 1-mal bearbeitet

Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19541
Anmeldedatum : 24.04.08
keine
phpBB3

Benutzerprofil anzeigen

Nach oben Nach unten

Re: Hover in den Index Modulen

Beitrag von Aiko-Chan am So 11 Jul 2010 - 16:36

In dem Forum das ich im Profil angegeben hab, habe ich noch gar nichts geändert ^^"
Für den Style und solche Sachen hab ich ein separates Forum, und in dem hab ich diesen Code benutzt (der sieht auch irgendwie einfacher aus als deiner Razz)

Code:
<html>
<head>
<script
language="JavaScript">
<!--
button1= new Image();
button1.src = "bilder/knopf.jpg"
button2= new Image();
button2.src = "bilder/email.jpg"
/* usw. für alle Grafiken,
die am Mouse-Over-Effekt beteiligt sind */
//-->
</script>
</head>
<body>
<a href="mailto:deine.mail@gmx.de"
onmouseover="austausch1.src='bilder/email.jpg';"
onmouseout="austausch1.src='bilder/knopf.jpg';">
<img src="bilder/knopf.jpg"
border="0" width="71"height="60"
name="austausch1"></a>
</body>
</html>

Das funktioniert super ^^

Aiko-Chan
Stammgast
Stammgast

Weiblich Beiträge : 247
Anmeldedatum : 27.06.10
keine
phpBB2

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten