ilch Forum » Ilch Clan 1.1 » Allgemein » Boxen Transparent machen / Mousovereffek

Geschlossen
  1. So. 14.10.2012 15:38 Uhr #1
    User Pic
    Isalapisa Mitglied
    Registriert seit
    05.07.2012
    Beiträge
    135
    Beitragswertungen
    1 Beitragspunkte
    Wie kann ich Boxen samt Inhalt, einen Mausovereffekt hinzufügen

    z.B bei der Loginbox ist ein Avatar bei mir zu sehen, da möchte ich nun das der Avatar des jeweiligen in der Login Box schwächer angezeigt wird und bei der Maus wenn man drüber fährt vollfarbig angezeigt wird.
    Also ein Mausovereffekt?
    0 Mitglieder finden den Beitrag gut.
  2. So. 14.10.2012 15:49 Uhr #2
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.680
    Beitragswertungen
    1216 Beitragspunkte
    Da gibt es viele Möglichkeiten zB. per css, js o. jquery. Willst Du den Transprenzeffekt animiert und und...

    zB. per css 
    img {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
  3. So. 14.10.2012 18:25 Uhr #3
    User Pic
    Isalapisa Mitglied
    Registriert seit
    05.07.2012
    Beiträge
    135
    Beitragswertungen
    1 Beitragspunkte
    genau das hab ich schon probiert funktioniert allerdings nicht
    das Avatar der User ist ja nicht nur ein einzelndes Bild sondern wird ja bestimmt. Es muss also auf alle User antreffen
    habe ich gelesen auf externer Link


    ich nutze einen Teamslider und möchte gerne den mit diesem Effekt ausstatten.
    möchte gerne die next und back funktion ( mit button ) und den Avatar Transparent machen u. bei Maus heller

    Teamslider.html 
    <!-- Ilch Team Silder by OloX [+] www.dms-gaming.com -->
<div id="ilchTeamSlider">
  <div id="its_team-switch">
  <span id="prev_team"></span>  
  <ul id="its_teams_list">
  {EXPLODE}
     <li title="({teamanz} Teammitglied{_if_{teamanz}>'1'}er{/_endif})" id="its_item_{teami}">{teamname}</li>
  {EXPLODE}
  </ul> 
  <span id="next_team"></span>
  <div style="clear:both;"></div>
  </div>
  {EXPLODE}
  <div class="its_team" id="its_team_{teamnumber}">
	 <ul>
        {EXPLODE}  				
		<li><a href="index.php?user-details-{userid}"><img src="{avatar}" alt="{username}" width="115" height="145"  title="{username}" style="opacity: 0.6;"></a>
        
        </li>
        {EXPLODE}
	 </ul>                        
  </div>        
  <div class="its_team_navi" id="its_team_navi_{teamnumber}">
     <span style="float:left;" id="its_prevBtn_{teamnumber}"><a class= href="javascript:void(0);"><img src="include/images/back.png" border="0" alt="Online"></a></span>
     <span id="its_nextBtn_{teamnumber}" style="float:right;"><a class= href="javascript:void(0);"> <img src="include/images/next.png" border="0" alt="Online"></a></span>
    <div style="clear:both;"></div>
  </div>
      {EXPLODE}          
</div>
<!-- Ilch Team Silder END --> 
{EXPLODE}
<div class="its_errortitle"><strong>ERROR:</strong><br />{_lang_noteamthere}</div>


    teamslider.css 

    @charset "utf-8";

#its_team-switch {
    margin: 7px 0 4px 0
}
.its_team_navi {
    display: none;
     margin: 2px 0 2px 0;
	 overflow-style:marquee-block;
	 margin-left: -42px;
	 margin-top: -80px;
}
.its_team_navi span a {
    outline-style: none;
    padding: 4px 3px 2px 3px;
    text-decoration: none;
    width: 5px;
	margin-right: -42px;
}
.its_team ul, .its_team li, #its_teams_list, #its_teams_list li {
    display: block;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#its_teams_list {
    font-weight:bold;
    text-align:center;
    float:left;
	font-size:12px
}
.its_team li {
    overflow: hidden;
}
.its_team li span.its_user-avatar, .its_team li span.its_user-data {
    display: block;
    float: left;
}
.its_team li span.its_user-avatar {
    margin-right: 6px;
    min-height: 78px;
    text-align: center;
}
.its_team li span.its_user-data em {
    display: block;
    font-style: normal;
    margin-bottom: 5px;
}
.its_team li a img {
    border: medium none;
}
#prev_team, #next_team {
    background: url("arrows.png") no-repeat scroll -3px -16px transparent;
    cursor: pointer;
    display: block;
    float: left;
    height: 16px;
    width: 10px;
}
#next_team {
    background-position: -3px 0;
    float: right;
}
.its_errortitle {
    background: none repeat scroll 0 0 #FCDCD4;
    border: 1px solid #F03D0E;
    color: #F03D0E;
    margin: 2px 0;
    padding: 4px 6px;
    text-align: justify;
}



    Zuletzt modifiziert von Isalapisa am 14.10.2012 - 18:26:09
    0 Mitglieder finden den Beitrag gut.
  4. Mo. 15.10.2012 22:25 Uhr #4
    User Pic
    blakedj06 gelöschter User
    ersetze mal den Code der Teamslider.html mit folgenden: 

    <!-- Ilch Team Silder by OloX [+] www.dms-gaming.com -->
<script type = "text/javascript">
    $(function(){
        $('.fade').hover(function(){
            $(this).animate({
                opacity : 1
            });
        }, function(){
            $(this).animate({
                opacity : 0.6
            });
        });
    });
</script>
<div id = "ilchTeamSlider">
    <div id = "its_team-switch">
        <span id = "prev_team"></span>
        <ul id = "its_teams_list">
            {EXPLODE}
            <li title = "({teamanz} Teammitglied{_if_{teamanz}>'1'}er{/_endif})" id = "its_item_{teami}">{teamname}</li>
            {EXPLODE}
        </ul>
        <span id = "next_team"></span>

        <div style = "clear:both;"></div>
    </div>
    {EXPLODE}
    <div class = "its_team" id = "its_team_{teamnumber}">
        <ul>
            {EXPLODE}
            <li>
                <a href = "index.php?user-details-{userid}"><img style = "opacity:0.6" class = "fade" src = "{avatar}" alt = "{username}" width = "115" height = "145" title = "{username}"></a>
            </li>
            {EXPLODE}
        </ul>
    </div>
    <div class = "its_team_navi" id = "its_team_navi_{teamnumber}">
        <span style = "float:left;" id = "its_prevBtn_{teamnumber}"><a href = "javascript:void(0);"><img style = "opacity:0.6" class = "fade" src = "include/images/back.png" border = "0" alt = "Online"></a>
        </span> <span id = "its_nextBtn_{teamnumber}" style = "float:right;"><a href = "javascript:void(0);">
        <img src = "include/images/next.png" style = "opacity:0.6" border = "0" alt = "Online" class = "fade"></a></span>

        <div style = "clear:both;"></div>
    </div>
    {EXPLODE}
</div><!-- Ilch Team Silder END -->{EXPLODE}
<div class = "its_errortitle"><strong>ERROR:</strong><br />{_lang_noteamthere}</div>


    Ich hab auch mal 2 Fehler im Code entfernt. Sollte so eigentlich funktionieren da Jquery beim Teamslider glaube ich dabei ist.


    Zuletzt modifiziert von blakedj06 am 15.10.2012 - 22:25:58
    0 Mitglieder finden den Beitrag gut.
  5. Fr. 19.10.2012 10:36 Uhr #5
    User Pic
    Isalapisa Mitglied
    Registriert seit
    05.07.2012
    Beiträge
    135
    Beitragswertungen
    1 Beitragspunkte
    jau vielen dank, funktioniert

    ich möchte gerne diese noch bei Teams einfügen, bei den Avataren

    teams.htm 

    <table width="100%" cellpadding="3" border="0" cellspacing="1" class="border">
<tr class="Cdark">
	<td colspan="6" valign="bottom" align="center">{show}</td>
</tr>
</table>
{EXPLODE}
<table width="100%" cellpadding="3" border="0" cellspacing="1" class="border">
{EXPLODE}
<tr class="{class}">
	<td>
	<table width="100%" cellpadding="3" border="0" cellspacing="1">
	<tr>
		<td rowspan="2" width="30%" align="center" valign="middle"><a href="index.php?user-details-{uid}">{avatar}</a></td>
		<td colspan="4"><a href="index.php?user-details-{uid}">{name}</a></td>
	</tr><tr>
		<td width="25%">{posi}</td>
		<td width="5%" align="center">{staat}</td>
		<td width="20%">{status}</td>
		<td width="10%">&nbsp;</td>
	</tr>
	</table>
	</td>
</tr>
{EXPLODE}
<tr class="{class}">
	<td width="30%">{name}</td>
	<td width="25%">{posi}</td>
	<td width="5%" align="center">{staat}</td>
	<td width="20%">{status}</td>
	<td width="10%" align="center"><a href="index.php?user-details-{uid}">{_lang_more}</a></a></td>
</tr>
{EXPLODE}
</table>
<br />


    nach etwas probieren bin ich auf die Lösung gekommen, funktioniert aber vielleicht ist das unüblich? 

    <script type = "text/javascript">
    $(function(){
        $('.fade').hover(function(){
            $(this).animate({
                opacity : 1
            });
        }, function(){
            $(this).animate({
                opacity : 0.6
            });
        });
    });
</script>

<table width="100%" cellpadding="3" border="0" cellspacing="1" class="border">
<tr class="Cdark">
	<td colspan="6" valign="bottom" align="center">{show}</td>
</tr>
</table>
{EXPLODE}
<table width="100%" cellpadding="3" border="0" cellspacing="1" class="border">
{EXPLODE}
<tr class="{class}">
	<td>
	<table width="100%" cellpadding="3" border="0" cellspacing="1">
	<tr>
		<td rowspan="2" width="30%" align="center" valign="middle"><a href="index.php?user-details-{uid}"<img style = "opacity:0.6" class = "fade">{avatar}</a></td>
		<td colspan="4"><a href="index.php?user-details-{uid}">{name}</a></td>
	</tr><tr>
		<td width="25%">{posi}</td>
		<td width="5%" align="center">{staat}</td>
		<td width="20%">{status}</td>
		<td width="10%">&nbsp;</td>
	</tr>
	</table>
	</td>
</tr>
{EXPLODE}
<tr class="{class}">
	<td width="30%">{name}</td>
	<td width="25%">{posi}</td>
	<td width="5%" align="center">{staat}</td>
	<td width="20%">{status}</td>
	<td width="10%" align="center"><a href="index.php?user-details-{uid}">{_lang_more}</a></a></td>
</tr>
{EXPLODE}
</table>
<br />
    0 Mitglieder finden den Beitrag gut.
  6. Fr. 19.10.2012 22:27 Uhr #6
    User Pic
    blakedj06 gelöschter User
    Na ja das ist alles andere als üblich/ordentlich. ^^

    Das Avatarimage wird in der teams.php angegeben wenn dann mache bitte dort class="fade" rein. Und lösche diesen Murks von img Tag in der HTM. ^^

    PS: Du kannst auch das Script von mir in deine index.htm machen dadurch kannst du auf der ganzen Seite egal was mit class="fade" und der Angabe der opacity faden lassen und musst es nicht mehrmals in verschiedenen Dateien angeben.


    Zuletzt modifiziert von blakedj06 am 19.10.2012 - 22:29:07
    0 Mitglieder finden den Beitrag gut.
  7. Sa. 20.10.2012 00:05 Uhr #7
    User Pic
    Isalapisa Mitglied
    Registriert seit
    05.07.2012
    Beiträge
    135
    Beitragswertungen
    1 Beitragspunkte
    ah vielen dank, hab es noch nicht probiert aber werde ich mal schauen

    ansonsten schicke homepage hast du da lächeln

    mir gefällt bei dir, im Forum die versch. Bilder zu jedem Bereich
    und deine Shoutbox und Contenbereich die sich öffnen lassen/schließen lassen wie bei Facebook z.B das Chatfenster.
    0 Mitglieder finden den Beitrag gut.
  8. Sa. 20.10.2012 01:26 Uhr #8
    User Pic
    blakedj06 gelöschter User
    Thx aber da ist noch vieles nicht so toll wie Du es vielleicht findest die Page bekommt nochmal ein großes Update.

    Dennoch Danke zwinker
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Allgemein

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten