Das Forum der Foren
Willkommen im offiziellen Supportforum von Forumieren!

Um alle Vorteile unseres Forums zu nutzen, melden Sie sich bitte an. Wenn Sie bereits Mitglied sind loggen Sie sich ein.


Erstellen Sie ein kostenloses Forum wie dieses hier.
Regeln und nützliche Hinweise
Slideshow-Generator
Der Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-GeneratorDer Forumieren Slide Show - Diashow-Generator
Lexi Help
Die neuesten Themen
» Wrestling Around the World!
von Emily Stein Gestern um 11:46

» Wrestling Forum
von Emily Stein Gestern um 11:45

» Spacemaniac-das Modellraketen Forum für alle ;)
von Emily Stein Gestern um 11:43

» Signatur (468*60) für http://rpg-drachenkrieg.forumieren.eu
von Zocker96 Do 22 Jun 2017 - 21:45

» Guthaben kaufen / einsetzen - Was kostet wie viel?
von Forumbot Do 22 Jun 2017 - 19:43

» [Update] jQuery-Update: von Version 1.7 zu 3.2
von Forumbot Do 22 Jun 2017 - 18:23

» C&C Renegade Forum
von inde Do 22 Jun 2017 - 17:32

» Tutorial-Forum für forumieren Administratoren.
von inde Do 22 Jun 2017 - 17:31

» Youtube Fanforum
von Emily Stein Do 22 Jun 2017 - 17:07

» Youtuber Fanforum
von Emily Stein Do 22 Jun 2017 - 17:07

» Prime-Kingz.de - We Love to Prime-Kingz
von Emily Stein Do 22 Jun 2017 - 17:06

» [phpBB3] Inter-NET - Das Forum zum allgemeinen Internet
von Emily Stein Do 22 Jun 2017 - 17:05

» CodeLabs
von Emily Stein Do 22 Jun 2017 - 17:04

» Animal Crossing Villagers Forum
von Emily Stein Do 22 Jun 2017 - 17:03

» Htmlfreak-Forum für Webdesign, Events und Frageforum
von Emily Stein Do 22 Jun 2017 - 17:02

» Test-Forum (Foruml)
von Emily Stein Do 22 Jun 2017 - 16:57

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 : 251
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 : 251
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
avatar
Zuckerpuppe
Admin a.D.
Admin a.D.

Weiblich Beiträge : 19539
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 : 251
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