kostenloser Webspace werbefrei: lima-city

Facebook, Twitter & YouTube-Logo aufleuchten lassen

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

ausschnitt beispiel bereich bild code dank datei element filter graphik http image layout maske position share teil test url webseite
  1. Autor dieses Themas

    d*******v

    15:29, 15.3.2013
    Hallo,

    Ich bin noch relativ neu im Bereich HTML und wollte fragen wie ich die Logos (Biespiel: http://battlelog.battlefield.com/bf3/de/news/view/2925730253467848576/ --> Ganz unten rechts) so "aufleuchten" lassen kann. Bitte verständlich erklären ;-)

    Gruß

    Beitrag zuletzt geändert: 15.3.2013 18:03:32 von dominiktv

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. nilsmargotti

    Kostenloser Webspace von nilsmargotti

    nilsmargotti hat kostenlosen Webspace.

    16:22, 15.3.2013
    Das machst du mit css. Read http://www.css3.info/preview/opacity/ and http://www.w3schools.com/cssref/sel_hover.asp

  4. tee

    Moderator Kostenloser Webspace von tee

    tee hat kostenlosen Webspace.

    16:32, 15.3.2013
    Um es ein wenig auszuführen:

    Du solltest eine CSS Datei einbinden, das findet im Bereich <head></head> statt und sieht wie folgt aus:

    <head>
<link rel="stylesheet" type="text/css" href="css/name_der_datei.css" />
</head>

    Und im Ordner css, in der Datei name_der_datei.css definierst du für z.Bsp. eine Div-Box zwei Werte:

    div.logo{
background-color: #000000;
color: #FFFFFF;
}

div.logo:hover{
background-color: #FFFFFF;
color: #000000;
}

    Der Wert mit :hover definiert die Attribute für den Fall, dass der Mousecursor über dem Objekt schwebt (hovert). In diesem Beispiel wechselt die Hintergrundfarbe von Schwarz auf Weiss beim überfahren mit dem Cursor.

    In der HTML Datei definierst du dann die Div-Box und gibst ihr die styles mit:
    <div class="logo">Dummy-Text-Lalala</div>

    Mehr zu CSS findest du unter www.css4you.de, mehr zu HTML unter de.selfhtml.org

    MfG T

    PS: Wer Fehler findet bitte korrigieren

    Beitrag zuletzt geändert: 15.3.2013 16:35:41 von tee

  5. nilsmargotti

    Kostenloser Webspace von nilsmargotti

    nilsmargotti hat kostenlosen Webspace.

    16:39, 15.3.2013
    Ich glaube er wollte Facebook, Twitter und co. Icons zum leuchten bringen.
    Deswegen folgende Abänderungen:
    tee schrieb:

    img.logo{
opacity: 0.8;
}

img.logo:hover{
opacity: 0;
}


    <img class="logo" src="datei.dateiendung(jpg,png,...)"></img>




    Beitrag zuletzt geändert: 15.3.2013 16:40:51 von nilsmargotti

  6. timebandit

    timebandit hat kostenlosen Webspace.

    16:54, 15.3.2013
    in die CSS:
    img.logo
{
opacity:0.4;
 /* für  IE */
filter:alpha(opacity=40); 
}
img.logo:hover
{
opacity:1.0;
 /* für  IE */
filter:alpha(opacity=100);   
}

    in den HTML-Teil
    ...
    <img class="logo" source="dein Pfad zum Logo.png" width usw. >
  7. Autor dieses Themas

    d*******v

    18:03, 15.3.2013
    Danke für die bisherigen Antworten, jedoch meinte ich das wie im Beispiel oben: http://battlelog.battlefield.com/bf3/de/news/view/2925730253467848576/
    Dort ganz unten rechts sind die Icons die sich ändern, wenn man drüber fährt.

    Gruß

  8. m******e

    18:56, 15.3.2013
    dominiktv schrieb:
    Danke für die bisherigen Antworten, jedoch meinte ich das wie im Beispiel oben: http://battlelog.battlefield.com/bf3/de/news/view/2925730253467848576/
    Dort ganz unten rechts sind die Icons die sich ändern, wenn man drüber fährt.
    Das wird ebenfalls über CSS gesteuert, in diesem Fall jedoch mit einer Sprite-Graphik, welche jeweils in einem zuvor definierten kleineren Bereich als die Graphik selbst an die richtig Position verschoben wird.

    Alles verstanden? :confused:

    Ok, anders:
    Eine Sprite-Graphik besteht aus mehreren Bildern innerhalb einer Graphik, wobei jeweils nur ein Teil der Graphik - bzw. ein Ausschnitt - angezeigt wird, bzw. sichtbar ist.
    Nach belieben wird die Graphik hin & her, und/oder hoch & runter verschoben, sodass das gewünschte Bild sichtbar ist.
    Wieviel aus der Gesamtgraphik sichtbar ist, wird über zB ein Div-Element zuvor festgelegt.
    Das Div-Element dient als Maske und hat seinen festen Platz in der Webseite, und die Graphik wird quasi "darunter dahinter" an den gewünschten Platz verschoben.
    So wirkt es, als gäbe es mehrere Bilder.

    Beitrag zuletzt geändert: 15.3.2013 23:35:39 von menschle
  9. Autor dieses Themas

    d*******v

    19:26, 15.3.2013
    Ok, anders:
    Eine Sprite-Graphik besteht aus mehrerenen Bildern innerhalb einer Graphik, wobei jeweils nur ein Teil der Graphik - bzw. ein Ausschnitt - angezeigt wird, bzw. sichtbar ist.
    Nach belieben wird die Graphik hin & her, und/oder hoch & runter verschoben, sodass das gewünschte Bild sichtbar ist.
    Wieviel aus der Gesamtgraphik sichtbar ist, wird über zB ein Div-Element zuvor festgelegt.
    Das Div-Element dient als Maske und hat seinen festen Platz in der Webseite, und die Graphik wird quasi "darunter" an den gewünschten Platz verschoben.
    So wirkt es, als gäbe es mehrere Bilder.


    Da ich ja noch ein "Noob" in dem Bereich bin: Gibt es ein Tutorial dazu oder zu etwas ähnlichem?

    Gruß

  10. m******e

    20:44, 15.3.2013
    dominiktv schrieb:
    Da ich ja noch ein "Noob" in dem Bereich bin: Gibt es ein Tutorial dazu oder zu etwas ähnlichem?
    Jetzt ja, zum Beispiel eine >> Demo <<

    Quelltext
    <html><head><title></title>
<style type="text/css"><!--
#footer-share{position:absolute;height:20px;right:4px;bottom:20px;}
#footer-share ul{position:relative;margin:0;padding:0;}
#footer-share ul li{float:left;margin-right:25px;position:relative;}
#footer-share ul li.last{margin-right:0;}
#footer-share ul li a{display:block;width:100%;height:100%;position:relative;background:url(social_logos_footer.png) no-repeat;}
#footer-share ul li a#footer-facebook-logo{width:78px;height:29px;background-position:0 top;}
#footer-share ul li a#footer-facebook-logo:hover{background-position:0 bottom;}
#footer-share ul li a#footer-twitter-logo{width:81px;height:29px;background-position:-78px top;}
#footer-share ul li a#footer-twitter-logo:hover{background-position:-78px bottom;}
#footer-share ul li a#footer-youtube-logo{width:50px;height:29px;background-position:-159px top;}
#footer-share ul li a#footer-youtube-logo:hover{background-position:-159px bottom;}
ul {list-style-type:none;}
-->
</style>
</head>
<body text="#fff" bgcolor="#000">

 <div id="footer-share">
 <ul>
 <li><a href="Facebook" target="_blank" id="footer-facebook-logo" title=" Facebook "></a></li>
 <li><a href="Twitter" target="_blank" id="footer-twitter-logo" title=" Twitter "></a></li>
 <li><a href="Youtube" target="_blank" id="footer-youtube-logo" title=" Youtube "></a></li>
 </ul>
 </div>

</body>
</html>
    ;)

    Beitrag zuletzt geändert: 16.3.2013 13:18:04 von menschle
  11. Autor dieses Themas

    d*******v

    21:42, 15.3.2013
    menschle schrieb:
    dominiktv schrieb:
    Da ich ja noch ein "Noob" in dem Bereich bin: Gibt es ein Tutorial dazu oder zu etwas ähnlichem?
    Jetzt ja, zum Beispiel ein >> Beispiel <<

    Quelltext
    <html><head><title></title>
<style type="text/css"><!--
#footer-share{position:absolute;height:20px;right:4px;bottom:20px;}
#footer-share ul{position:relative;margin:0;padding:0;}
#footer-share ul li{float:left;margin-right:25px;position:relative;}
#footer-share ul li.last{margin-right:0;}
#footer-share ul li a{display:block;width:100%;height:100%;position:relative;background:url(social_logos_footer.png) no-repeat;}
#footer-share ul li a#footer-facebook-logo{width:78px;height:29px;background-position:0 top;}
#footer-share ul li a#footer-facebook-logo:hover{background-position:0 bottom;}
#footer-share ul li a#footer-twitter-logo{width:81px;height:29px;background-position:-78px top;}
#footer-share ul li a#footer-twitter-logo:hover{background-position:-78px bottom;}
#footer-share ul li a#footer-youtube-logo{width:50px;height:29px;background-position:-159px top;}
#footer-share ul li a#footer-youtube-logo:hover{background-position:-159px bottom;}
ul {list-style-type:none;}
-->
</style>
</head>
<body text="#fff" bgcolor="#000">

 <div id="footer-share">
 <ul>
 <li><a href="Facebook" target="_blank" id="footer-facebook-logo" title=" Facebook "></a></li>
 <li><a href="Twitter" target="_blank" id="footer-twitter-logo" title=" Twitter "></a></li>
 <li><a href="Youtube" target="_blank" id="footer-youtube-logo" title=" Youtube "></a></li>
 </ul>
 </div>

</body>
</html>
    ;)


    Super, vielen, vielen Dank :D

  12. artelier

    Kostenloser Webspace von artelier

    artelier hat kostenlosen Webspace.

    12:16, 16.3.2013
    Ich habe dies bei meiner Webseite auch gemacht, jedoch direkt in HTML (ist ziemlich einfach) ;) Du musst nur 2 Bilder erstellen z.B. das eine in Schwarz-Weiß und das andere in Farbe und dann hier einfügen:

    <a href="LINK"><img src="SCHWARZ-WEISS" onmouseover="this.src='IN FARBE'" onmouseout="this.src='SCHWARZ-WEISS'"/></a>


    Müsste gehen ;)

    Beitrag zuletzt geändert: 16.3.2013 12:17:06 von artelier

  13. m******e

    13:15, 16.3.2013
    artelier schrieb:
    Ich habe dies bei meiner Webseite auch gemacht, jedoch direkt in HTML (ist ziemlich einfach) ;)
    Nö, eben nicht. Also nicht "direktes HTML", denn es ist Javascript. :P

    Du musst nur 2 Bilder erstellen z.B. das eine in Schwarz-Weiß und das andere in Farbe und dann hier einfügen:

    <a href="LINK"><img src="SCHWARZ-WEISS" onmouseover="this.src='IN FARBE'" onmouseout="this.src='SCHWARZ-WEISS'"/></a>
    Das kann nicht der komplette Quelltext sein, denn 
    "this.src='SCHWARZ-WEISS'"
    ist nicht weiter definiert. Was hilft es also einem, der sich damit noch nicht so gut auskennt? ;)

    Außerdem tut sich da nun so gar nichts, wenn Besucher Deiner Seite JavaScript deaktiviert haben, und warum 2 Bilder, wenn es modernerweise über eine Sprite-Graphik in Verbindung mit CSS realisierbar ist? Rückschritte in die Anfänge von HTML? ;)
  14. Autor dieses Themas

    d*******v

    14:16, 9.6.2013
    Moin nochmal,

    bei meinem neuen Layout funktionierts nicht mehr.

    Meine neue Seite: http://www.dominiktv.de
    Hier die Seite mit dem Test: http://www.dominiktv.de/test

    Die Icons sollten unten im Footer-Bereich sein, jedoch sind sie jetzt sehr weit rechts...

    Gruß

  15. n0tiert

    Kostenloser Webspace von n0tiert

    n0tiert hat kostenlosen Webspace.

    14:35, 9.6.2013
    dominiktv schrieb:
    Moin nochmal,

    bei meinem neuen Layout funktionierts nicht mehr.

    Meine neue Seite: http://www.dominiktv.de
    Hier die Seite mit dem Test: http://www.dominiktv.de/test

    Die Icons sollten unten im Footer-Bereich sein, jedoch sind sie jetzt sehr weit rechts...

    Gruß


    Vielleicht solltest du erstmal die unmengen von fehlern beheben,

    CSS
    http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.dominiktv.de%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=de

    HTML
    http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dominiktv.de&charset=%28detect+automatically%29&doctype=Inline&group=0

    und hiermit wäre ich sehr vorsichtig wenn du gfx & code / layout von EA klaust

    "Copyright © 2013 - All Rights Reserved - DominikTV.de"

    url("/images/social_logos_footer.png") no-repeat scroll 0 0 transparent

    bei der alten version nutz du ein img welche alle 3 beinhaltet und beim :hover machst du ein
    background bottom 0

    bei der neuen variante via icons in fonts ?! und wunderst dich das es nicht geht , hihi

    ok,

    Dein bild 
    #footer-share ul li a {
display: block;
width: 100%;
height: 100%;
position: relative;
background: url(/images/social_logos_footer.png) no-repeat;
}


    bei der alten variante hast du ne size des entsprechenden img (facebook) von links oben

    #footer-share ul li a#footer-facebook-logo {
width: 78px;    // breite
height: 29px;  // höhe
background-position: 0 top;   // <--- von links oben 
}


    beim :hover

    #footer-share ul li a#footer-facebook-logo:hover {
background-position: 0 bottom;  // <--- von unten 
}


    die width / height bleibt gleich da der wert nicht verändert, er swapped lediglich das img

    du solltest die in den <div> "wrapper row2" hängen aber nicht innerhalb "footer"

    Beitrag zuletzt geändert: 9.6.2013 15:34:48 von n0tiert

  16. die-hue

    die-hue hat kostenlosen Webspace.

    13:51, 12.6.2013
    Du könntest mit CSS Keyframes die Logos von durchsichtig auf normal stellen.
    Z.B so:
    design.css:
    @keyframes animationsname
{
0% (opacity:0.5;)
50% (opacity:1;)
100% (opacity:0.5;)
}
@-webkit-keyframes animationsname
{
0% (opacity:0.5;)
50% (opacity:1;)
100% (opacity:0.5;)
}
@-moz-keyframes animationsname
{
0% (opacity:0.5;)
50% (opacity:1;)
100% (opacity:0.5;)
}

    index.html:
    <img src="deinbild.jpg" style="animation: animationsname infinite 2s; -webkit-animation: animationsname infinite 2s; -moz-animation: animationsname infinite 2s;">


    Beitrag zuletzt geändert: 12.6.2013 15:11:10 von hackyourlife

  17. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!