zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie platziere ich ein Lupen-Icon in Lightbox-Vorschaubild?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 09.09.2008, 18:27
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2008
Beiträge: 5
Flupke befindet sich auf einem aufstrebenden Ast
Standard Wie platziere ich ein Lupen-Icon in Lightbox-Vorschaubild?

Ich versuche, auf meiner Seite ein Lupen-Icon in meine Lightbox-Vorschaubilder zu integrieren.
Zu diesem Zweck habe ich bereits folgenden (nicht auf meinem Mist gewachsenen) Code in meine "style-css" (Wordpress 2.6.2) eingefügt:

Code:
a[rel=lightbox] {background-image:url(http://www.espritdescalier.de/Lupe.png); background-repeat:no-repeat;padding-left:20px;}
Jetzt erscheint zwar das Lupen-Icon, jedoch noch nicht an der gewünschten Stelle, nämlich rechts unten in jedem Vorschaubild. Nun habe ich versucht, mit Hilfe von CSS 4 You - The Finest in Stylesheets und Firebug (untersuchen - layout) die Lupe richtig zu positionieren, aber meine Kenntnisse sind offenbar noch nicht ausreichend, so dass es mir leider nicht gelingt. Die Lupe landet überall, nur nicht da, wo sie soll. Wäre jemand bitte so nett, mir dabei behilflich zu sein? Danke im Voraus.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.09.2008, 22:57
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Wahrscheinlich müsstest du das Icon absolut positionieren. Wo auch immer es jetzt ist, ich finde es deinen Link folgend nicht.

Deine Seite lädt sehr langsam.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.09.2008, 23:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2008
Beiträge: 5
Flupke befindet sich auf einem aufstrebenden Ast
Standard

Das Icon ist gleich auf der Startseite beim ersten Artikel:



Ich teste es nur bei diesem Artikel, deshalb ist es bei den anderen nicht zu sehen. Ich hätte nun also gern die Lupe diagonal nach unten in die rechte untere Ecke des Vorschaubildes verschoben. Nur, wie?
Mit Zitat antworten
  #4 (permalink)  
Alt 09.09.2008, 23:25
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

ach da.
wäre das so recht?
Code:
a[rel=lightbox] {
...
background-position:right bottom;
float:left;
}
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 09.09.2008, 23:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2008
Beiträge: 5
Flupke befindet sich auf einem aufstrebenden Ast
Standard

Danke, schon viel besser:



Um nun aber nicht so viel Platz auf Kosten des Textes zu verschwenden, hätte ich die Lupe gern IM Bild, so wie ich es jetzt rot angedeutet habe. Das Ende des Lupengriffes soll in der äußersten rechten unteren Ecke beginnen und in Richtung Bildmitte zeigen. Ist das auch so unkompliziert einstellbar?
Mit Zitat antworten
  #6 (permalink)  
Alt 10.09.2008, 00:07
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Nicht einfach. Du müsstest dem Link innen anliegenden img
Code:
a[rel=lightbox] img {

position:relative; 
z-index:-1;
}
geben, damit das background-image des Links (die Lupe) in den foreground rückt. Geht im Firefox, woanders vielleicht nicht.

Dann kannst du dem Icon-PNG im Grafikprogramm etwas mehr unsichtbaren Rand verpassen, damit es mit right bottom (bzw. left bottom) an der richtigen Stelle angezeigt wird (oder zum Testen: background-position: 90% 90%).

Viel Spaß noch beim Experimentieren, ich gehe nun schlafen. Der Tag war sehr lang. Manchmal sind sie so, einfach länger. Weiß auch nicht, warum. Hat sicher keine Bedeutung und keine Bewandtnis. Aber seltsam, schon.

Edit: Code nun etwas klarer.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (10.09.2008 um 00:10 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 10.09.2008, 02:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2008
Beiträge: 5
Flupke befindet sich auf einem aufstrebenden Ast
Standard

Habe leider noch kein zufriedenstellendes Ergebnis erzielen können.

Ein sehr schönes Beispiel für meine Wunschvorstellung lässt sich übrigens bei "focus.de" betrachten, wo man auch Lightbox-Vorschaubilder in Kombination mit einem semitransparenten Lupen-Icon verwendet:



Der Code dafür lautet dort:

PHP-Code:
<div class="w467">
<
div class="f-xl pd-t17">
<
div class="box-article-1 mg-t3">
<
div class="box-article-1i">
<
div style="overflow: hidden; height: 147px;">
<
script type="text/javascript">
</script>
<div style="height: 147px;">
<img class="pc-art-top" alt="Kajo Wasserh�vel wird neuer SPD-Bundesgesch�ftsf�hrer" src="http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_220xA.jpg"/>
<div id="ct_loadLB_2" class="box-lb-loader" style="display: none;"> </div>
<div id="ct_icLB_2" style="display: block;">
</div>
<div id="ct_loadLB_3" class="box-lb-loader" style="display: none;"> </div>
<div id="ct_icLB_3" style="display: block;">
<div onclick="javascript:getomni('','');" style="position: relative; left: 0px; top: -167px; height: 147px; width: 221px; opacity: 0.8; display: block; z-index: 980;">
<a onmouseout="document.getElementById('lupe_trans2').style.display='block';document.getElementById('lupe_akt2').style.display='none'" onmouseover="document.getElementById('lupe_trans2').style.display='none';document.getElementById('lupe_akt2').style.display='block'" rel="lightbox" credit="dpa" descr="Kajo Wasserhövel wird Bundesgeschäftsführer der SPD" href="http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_700xA.jpg?http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_1100xA.jpg?http://p3.focus.de/img/gen/E/H/HBEHxkt7_Pxgen_r_1300xA.jpg">
<img height="147" border="0" width="221" title="vergrößern" src="http://p3.focus.de/fol/pics/dummypics/blank.gif"/>
</a>
</div>
</div>
</div>
</div>
<div class="box-pictxt f-s c-b bgc-g1">Kajo Wasserhövel wird Bundesgeschäftsführer der SPD</div>
</div>
</div> 
Da ist ja offenbar auch eine "onmouse..."-Funktion dabei, die zur Folge hat, dass sich die Farbe der Lupenumgebung verändert, wenn mit der Maus drüberfährt. Die brauche ich nicht. Aber es kommt dort auch ein "z-index: 980;" vor. Allerdings nicht negativ. Bei "z-index:-1;" sind die Bilder nicht mehr verlinkt. Sobald ich aus "-1" eine "1" mache, klappt es wieder.

Ließe sich aus obigem Code eine vereinfachte Variante für mich ableiten?

Zitat:
damit das background-image des Links (die Lupe) in den foreground rückt
Ganz naive Frage: ließe sich nicht gleich ein "foreground"-image definieren, das sozusagen über dem anderen Bild schwebt? So sieht es beim Focus auch irgendwie aus, und so "schwebt" es mir auch vor ...
Mit Zitat antworten
  #8 (permalink)  
Alt 10.09.2008, 08:26
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Sicher. Nimm einfach ein zweites Bild mit in den Link und lege das zweite über das erste. Wenn das nicht geht, solltest du dir überlegen, mal einen Webdesigner zu beauftragen. Macht focus auch.

Die Frage, die ich hier reizvoll zu beantworten fand, war, wie man ein background-image dazu bringt, hier sinnvoll zu sein. Der Rest ist Arbeit, und das ist dein Teil.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (10.09.2008 um 08:28 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 11.09.2008, 20:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 09.09.2008
Beiträge: 5
Flupke befindet sich auf einem aufstrebenden Ast
Standard

Na, dann mal ran an die Arbeit. Danke.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
icon, lightbox, lupe, lupen-icon, magnifier

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jcarousel + jquery lightbox plugin Thorolf Javascript & Ajax 0 23.02.2011 13:18
Lightbox mit zweiter CSS Datei funktioniert nicht T4ke CSS 12 11.12.2007 19:20
Lightbox 2 wie Lightbox 1 öffnen .wired Javascript & Ajax 3 31.10.2007 22:35


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:50 Uhr.