Mousovereffek

Gehe zu Seite:

Geschlossen

So. 14.10.2012 15:38 Uhr #1

Isalapisa Mitglied

Registriert seit
05.07.2012

Beiträge
135

Beitragswertungen

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.
- zitieren
So. 14.10.2012 15:49 Uhr #2

Lord|Schirmer Administrator

Registriert seit
21.03.2007

Beiträge
7.680

Beitragswertungen

Da gibt es viele Möglichkeiten zB. per css, js o. jquery. Willst Du den Transprenzeffekt animiert und und...

zB. per css
?
1
2
3
4
5
6
7
8
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.
- zitieren

So. 14.10.2012 18:25 Uhr #3

Isalapisa Mitglied

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.

zitieren

Mo. 15.10.2012 22:25 Uhr #4

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.

zitieren

Fr. 19.10.2012 10:36 Uhr #5

Isalapisa Mitglied

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.

zitieren

Fr. 19.10.2012 22:27 Uhr #6

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.
- zitieren
Sa. 20.10.2012 00:05 Uhr #7

Isalapisa Mitglied

Registriert seit
05.07.2012

Beiträge
135

Beitragswertungen

ah vielen dank, hab es noch nicht probiert aber werde ich mal schauen

ansonsten schicke homepage hast du da

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.
- zitieren
Sa. 20.10.2012 01:26 Uhr #8

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
0 Mitglieder finden den Beitrag gut.
- zitieren

Geschlossen

	Zurück zu Allgemein

Beitrag zur Merkliste hinzufügen

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