Partnerbuttons Transparent/ per Mausklick in voller Farbe.

Hallo alle zusammen.

Ich bastle seid kurzen wieder an meinem Forum rum und hab mir heute in der Forenübersicht für die Partnerseiten dieses Modul eingebaut.

Link

Ich hab dafür den zweiten Code verwendet. Jedoch finde ich irgendwie dass es viel zu bunt aussieht und nun dachte ich mir, dass man vielleicht die Buttons leicht transparent setzen könnte und wenn man mit der Maus darüber fährt oder darauf klickt, dass dann die ganze Farbe so zu sagen aufscheint.

Ich hab das auch schon in einem anderen Forum gesehen, allerdings wurde das entfernt sonst würde ich hier den Link dazu posten.

Ich hab auch bereits die Suchfunktion genutzt aber nichts passendes zu diesem Thema gefunden.

Jetzt wollte ich halt nachfragen, ob jemand von euch weiß wie das funktioniert und ob man mir das bitte genau erklären könnte.

Ich bedanke mich schon mal im Voraus und wünsche euch einen schönen Abend.
Liebe Grüße Leonides

Im Grunde ist das möglich, in dem du für die Img tags eine neue CSS Class einsetzt und diese dann über das CSS definierst.
Du musst mal auf den CSS Seiten im Netz nach dem Effekt opacity suchen.

Hallo #Frank!

Also ich hab jetzt mal Google angeworfen und nach opacity gesucht.

Jetzt weiß ich nur nicht wirklich welche Antwort auf meine Frage richtig ist.

Code:

a.transeffect: hover {
Filter: alpha (opacity = 50);
-Moz-opacity: 0,5;
-Khtml-opacity: 0,5;
Opazität: 0,5;
}

Code:

.transparent { zoom: 1; filter: alpha(opacity=50); opacity: 0.5; }

Code:

ein img: hover {
Filter: alpha (opacity = 50);
-Moz-opacity: 0,5;
-Khtml-opacity: 0,5;
Opazität: 0,5;
}

Code:

a: hover img {
Filter: alpha (opacity = 50);
-Moz-opacity: 0,5;
-Khtml-opacity: 0,5;
Opazität: 0,5;
}

Code:

{
Filter: alpha (opacity = 50);
-Moz-opacity: 0,5;
-Khtml-opacity: 0,5;
opacity: 0.5;}

Code:

{
position: absolute;
Höhe: 99%;
width: 25%;
cursor: pointer;
z-index: 10;
Filter: alpha (opacity = 20);
-Moz-opacity: 0,2;
-Khtml-opacity: 0,2;
Opazität: 0,2;

Code:

. Test {
    background-color: # 6374AB;
    width: 100%;
    color: # ffffff;
 }

Code:

. Opaque1 {/ / für alle anderen Browser
    opacity: .5;
 }

Code:

 . Opaque2 {/ / für IE5-7
    Filter: alpha (opacity = 50);
 }

Code:

 . Opaque3 {/ / für IE8
    -Ms-filter: "progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)";
 }

Ich stehe ehrlich gesagt total auf dem Schlauch und wäre echt dankbar wenn du mir bitte weiterhelfen könntest, den die Erklärungen dazu brachten mir im Grunde auch nicht viel. -.-

Sorry wegen den Umständen.

Liebe Grüße
Leonides

Hallo noch mal.

Entschuldigung wegen dem Doppeltpost, aber ich wollte an sich noch mal nachfragen, was hier der richtige CSS Code wäre. o.o
Blick da wie gesagt nicht wirklich durch, da es auf den verschiedenen Seiten nicht wirklich gute Erklärungen dazu gab.

Danke im voraus!
Liebe Grüße
Leonides

Ich habe deinen letzten Beitrag gar nicht gesehen.
Es geht in erster Linie ja darum das du den Code im Modul noch etwas erweitern musst.
Kannst du deinen Code mal bitte hier Posten, damit ich den entsprechend ändern kann?

Hallo, macht doch nichts dass du meinen letzten Beitrag nicht gesehen hast. Ihr habt ja andere Dinge auch zu tun.

Also hier ist mal der gesamte Code + die Toplistbutton. o.o
Der Code ist halt etwas lang geworden. ^^

Code:

<center><table border= "1" backroundcolor="#0B4B78" rules="groups" cellspacing="3" cellpadding="2" align="center" width="55%">
                      <td colspan="19" align="center" class="row1" height="20" style="color:e1d4e2; font-family:Arial; font-size:10pt;"></tr>   
           
                  <td align="left"> <a href="http://www4.malware-site.www/ts/ts.cgi?klick=938&tl=charts_mermaidmelody" target="_blank"><img src="http://www.cuteyhoneyflash.de/images/vote.png" alt="Anime & Manga Top 100" border="0"></a> </td>
<td align="center"> <a href="http://www.anime-toplist.net/index.php?a=in&u=Bella"><img src="http://www.anime-toplist.net/button.php?u=Bella" alt="Anime-Toplist.Net" border="0" /></a> </td>
<td align="center"> <a href="http://www4.malware-site.www/ts/ts.cgi?klick=469&tl=momoshs" target="_blank"><img src="http://www.beepworld.de/memberdateien/members20/momoko131/vote.gif" alt="Vote 4 me °O°" border="0"></a> </td>
<td align="center">
<a href="http://www.topsites24.net/ts/ts.cgi?klick=676&tl=YuunaChan" target="_blank"><img src="http://kisuki.net/kisuki/kisuki.net_kisuki_version10_vote.jpg" alt="Toplist - Anime Wallpapers, Anime Galleries & Graphic Resources - Kisuki.net" border="0"></a>
 </td>
<td align="center"><a href="http://www.malware-site.www/ts/ts.cgi?klick=1474&tl=sailorsaturnxx" target="_blank"><img src="http://www.anime-ultra.de/vote.gif" alt="Vote" border="0"></a></td>
<td align="left"> <!-- MangaWeb.de Top100 -->
<a target="_blank" href="http://www.mangaweb.de/index.php/toplist_in/Allgemein/wsid;249/index.html"><img src="http://www.mangaweb.de/images/mw_top100.sgif?wsid=249" alt="MangaWeb.de Top100" title="MangaWeb.de Top100" border="0" width="88" height="31" /></a>
<!-- MangaWeb.de Top100 -->
</td>
 <td align="center"> <a href="http://www.top.unlimited-manga.de/site/in/67/" target="_blank"><img src="http://www.top.unlimited-manga.de/images/btn/67.png" border="0" alt="Unlimited-Manga TopSites" /></a> </td>
<td align="center"> <a href="http://www5.malware-site.www/ts/ts.cgi?klick=525&tl=uchihaclan" target="_blank"><img src="http://i11.photobucket.com/albums/a176/sasuke15/top100.png" alt="Hier gehts zu Uchiha Clans Top 100!!" border="0"></a>
</td> </tr>

<td align="center"> <a href="http://www.topsites24.net/ts/ts.cgi?klick=652&tl=conanshrine" target="_blank"><img src="http://www.beepworld.de/memberdateien/members4/akiro/mcvote.gif" alt="Meitantei Conan Top 50" border="0"></a> </td>
<td align="center"> <a href="http://www3.malware-site.www/ts/ts.cgi?klick=178&tl=Kyurumi" target="_blank"><img src="http://home.arcor.de/yuu-xan/TopButton.gif" alt="HiA gehts zu KyurumiS Top100 " border="0"></a> </td>
<td align="center"> <a href="http://www5.malware-site.www/ts/ts.cgi?klick=344&tl=Shaggy" target="_blank"><img src="http://i2.tinypic.com/vhzscp.gif" alt="Hier entlang zur Toplist!" border="0"></a> </td>
<td align="center"> <a href="http://www.topsites24.net/ts/ts.cgi?klick=280&tl=WippFlipp" target="_blank"><img src="http://home.arcor.de/jeanne-lights/JT100.gif" alt="Hier gehts zur neuen Topliste" border="0"></a> </td>
<td align="center"><a href="http://www5.malware-site.www/ts/ts.cgi?klick=93&tl=medium" target="_blank"><img src="http://www.beepworld.de/memberdateien/members91/lady-subaru/votebutton.gif" alt="Fake Wings Top 100" border="0"></a> </td>
<td align="center"><a href="http://www5.malware-site.www/ts/ts.cgi?klick=114&tl=CelestialSign" target="_blank"><img src="http://www.celestial-sign.info/pic/voteme.jpg" alt="Hier gehts zur Topliste" border="0"></a></td>
<td align="center"> <a href="http://www5.malware-site.www/ts/ts.cgi?klick=403&tl=Absolutanime" target="_blank"><img src="http://tinypic.com/m94xmr.gif" alt="~~Please Vote!~~" border="0"></a></td>
<td align="center"> <a href="http://www5.malware-site.www/ts/ts.cgi?klick=421&tl=akime" target="_blank"><img src="http://i1.tinypic.com/nnwnxe.gif" alt="~+Anime Revolution Top 100+~" border="0"></a> </td></tr>

<td align="center"> <a href="http://www.malware-site.www/ts/ts.cgi?klick=871&tl=akirochan" target="_blank"><img src="http://www.beepworld.de/memberdateien/members4/akiro/vote.gif" alt="Please vote 4 me" border="0"></a></td>
<td align="center"> <a href="http://www.malware-site.www/ts/ts.cgi?klick=1566&tl=dolley" target="_blank"><img src="http://www.beepworld.de/memberdateien/members17/dolleynge/top50.jpg" alt="Dolleys Top100" border="0"></a></td>
<td align="center"> <a href="http://www5.malware-site.www/ts/ts.cgi?klick=212&tl=ShamanKingGFX" target="_blank"><img src="http://www.sabishii-anime.de/Vote2.gif" alt="Sabishii Anime Top 100" border="0"></a> </td>
<td align="center"> <a href="http://www6.malware-site.www/ts/ts.cgi?klick=21&tl=Dreamland_rpg" target="_blank"><img src="http://i131.photobucket.com/albums/p306/Mad-Ann/Homepage%20and%20Forum/vote-dreamland-button.gif" alt="vote" border="0"></a> </td>
<td align="center"><a href="http://www5.malware-site.www/ts/ts.cgi?klick=72&tl=Mad_Ann" target="_blank"><img src="http://i131.photobucket.com/albums/p306/Mad-Ann/top100_button.gif" alt="Top 100" border="0"></a></td>
<td align="center"> <a href="http://www.malware-site.www/ts/ts.cgi?klick=902&tl=moc" target="_blank"><img src="http://www.beepworld2.de/memberdateien/members15/magicnachtara/moctop50button.jpg" alt="Hier gehts zur neuen Topliste" border="0"></a> </td>
<td align="center"> <a href="http://www5.malware-site.www/ts/ts.cgi?klick=212&tl=Juri" target="_blank"><img src="http://i16.photobucket.com/albums/b25/Juri-chan/CnK/VoteButton.gif" alt="Hier gehts zur Topliste" border="0"></a> </td>
<td align="center"> <a href="http://www3.malware-site.www/ts/ts.cgi?klick=152&tl=Chibispirit" target="_blank"><img src="http://www.beepworld.de/memberdateien/members69/moonmine/vote.jpg" alt="Hier gehts zur Topliste" border="0"></a> </td></tr>

<td align="center"> <a href="http://www.malware-site.www/ts/ts.cgi?klick=697&tl=mia" target="_blank"><img src="http://members.lycos.co.uk/mangalovers/vote.png" alt="Girls-only´s Toplist!!!" border="0"></a> </td>
 <td align="center"> <a href="http://www5.malware-site.www/ts/ts.cgi?klick=192&tl=sgarten" target="_blank"><img src="http://sgarten.sg.funpic.de/votebutton.jpg" alt="Vote for me, please! <3" border="0"></a> </td>
<td align="center"> <a href="http://www6.malware-site.www/ts/ts.cgi?klick=70&tl=AkumaCorp" target="_blank"><img src="http://i703.photobucket.com/albums/ww38/Todesengel_Alita/Toplist/Votebutton.gif" alt="Akuma Corporations Top 70" border="0"></a> </td>
 <td align="center"><a href="http://www.malware-site.www/ts/ts.cgi?klick=538&tl=nicolechan" target="_blank"><img src="http://www.spiral.planet.ee/vote.jpg" alt="Kibou no Spiral Toplist" border="0"></a> </td>
<td align="center"><a href="http://www6.malware-site.www/ts/ts.cgi?klick=34&tl=GFX4You" target="_blank"><img src="http://www.fotos-hochladen.net/srgsiglf1yua.gif" alt="GFX4You Toplist" border="0"></a> </td>
<td align="center"><a href="http://www6.malware-site.www/ts/ts.cgi?klick=44&tl=SatsukisWorld" target="_blank"><img src="http://i858.photobucket.com/albums/ab141/Satsuki_03_album/vote.png" alt="Hier gehts zur Topliste" border="0"></a> </td>
<td align="center"> <a href="http://topsites.kametsu.com/"><img src="http://topsites.kametsu.com/button-2.php?u=Leonides" alt="Kametsu Topsites" border="0" /></a> </td>
<td align="right"> <a href="http://himegami.de/top100/"><img src="http://himegami.de/top100/button.php?u=Leonides" alt="Himegami.de Top 100" border="0" /></a></td></tr>
    </table></center>
    <br>
    <!-- Partner END --></center>


Danke für deine Hilfe.
Liebe Grüße
Leonides

Es ist ganz einfach:
Du musst über all im Code dem Image Tag:

Code:

<img src="http://www.cuteyhoneyflash.de/images/vote.png" alt="Anime & Manga Top 100" border="0">

So ergänzen:

<img id="partner" src="http://www.cuteyhoneyflash.de/images/vote.png" alt="Anime & Manga Top 100" border="0">

Dann musst du diese Einträge in dein Persönliches CSS einsetzen:

Code:

#partner {
Filter: alpha (opacity = 50);
-Moz-opacity: 0,5;
-Khtml-opacity: 0,5;
opacity: 0.5;
Opazität: 0,5;
}
#partner:hover {
Filter: alpha (opacity = 100);
-Moz-opacity: 1,0;
-Khtml-opacity: 1,0;
opacity: 1.0;
Opazität: 1,0;
}

Der Obere Teil ist der Transparente. Wenn dir das noch zu hell ist, kannst du die Werte Noch kleiner machen. Achte darauf das es mal mit Komma und mal mit Punkt angegeben wird.
Der Untere Teil ist der beim Hovern und Stellt die Transparenz auf 1 also Vollansicht.

Hallo #Frank danke für deine Hilfe, es hat super geklappt.

Ich weiß es ist nur eine Frage pro Thema erlaubt, aber ich wollte noch nachfragen ob man das selbe zum Beispiel mit anderen Bilder im Forum oder dem Avatar machen könnte?

Bzw. ob es genauso funktionieren würde oder ob man hier etwas beim CSS Teil bebachten muss?

Danke noch mal.
Liebe Grüße
Leonides

Es würde auf die Gleiche Weise auch mit anderen Bildern im Forum gehen.
Also z.B. für den Avatar bei den Beiträgen im Template:
viewtopic_body
dann den Avatar musst du dann in eine Span Class setzen.
Im Orginal sieht das im Template ja so aus:

<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}

{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


<!-- BEGIN profile_field -->

Und wenn du die Gleiche Class hier anwenden willst, dann must du das so eintragen:

<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}

{postrow.displayed.RANK_IMAGE}<span id="partner">{postrow.displayed.POSTER_AVATAR}</span>


<!-- BEGIN profile_field -->

Dann würde die Gleiche Einstellung auch für den Avatar im Profil bei den Beiträgen gelten.
Aber das solltest du nun wirklich selber ausprobieren.
Das deine Frage nun beantwortet ist, mache ich hier nun zu.
Wie das dann mit dem Avatar wirkt, kannst du hier sehen:
http://frank3.forumieren.eu/t3-gelosteine-codebox-zum-ersten#5