hover Rahmen nicht um Bild, sondern im Bild

[fabb]

Ich möchte gern, dass der Rahmen, der erscheint, wenn ich mit der Maus über mein Icon fahre,

a:hover {
  border: thick white solid;
}

das Icon nicht umschließt und es damit vergrößert, sondern er soll im Icon erscheinen, sodass das Bild insgesamt nicht größer wird.

Grüße

frank

[Steel]

Hi!

Das wird Problematisch. Per Definition ist ein Ramen um das Element nicht in dem Element. Was genau ist denn Dein Problem? Hast Du z.B. schonmal versucht,  dem Bild immer einen Rahmen mitzugeben und dem beim Hover einfach zu faerben?

[fabb]

Hi!

Das wird Problematisch. Per Definition ist ein Ramen um das Element nicht in dem Element. Was genau ist denn Dein Problem? Hast Du z.B. schonmal versucht,  dem Bild immer einen Rahmen mitzugeben und dem beim Hover einfach zu faerben?

Danke für deine Antwort. Mein Problem ist, dass ich den SimpleViewer einbinde und dort die Icons bei drüberhovern eben dieses Verhalten zeigen, dass ein innerer Rahmen entsteht. Damit ich ein einheitliches Erscheinungsbild erreiche, möchte ich die SimpleViewer Galerien mit Icons verlinken, die sich ähnlich verhalten wie die Icons wie gesagt im SimpleViewer.

Ich kann mir auch vorstellen, einfach zwei Bilder zu machen, wovon eines den dünnen Rahmen hat und das andere den breiteren. Das aber scheitert daran, dass es mir nicht gelingt, die Bilder beim drüberhovern gegeneinander zu tauschen.

Grüße

frank

[Steel]

Hi!

Tja. Flash kann sowas natuerlich ohne Probleme.

Ich kann mir auch vorstellen, einfach zwei Bilder zu machen, wovon eines den dünnen Rahmen hat und das andere den breiteren. Das aber scheitert daran, dass es mir nicht gelingt, die Bilder beim drüberhovern gegeneinander zu tauschen.

Warum nicht? in deinem anderen Thread gibts doch nun einige Hinweise dafuer wie man das machen kann. Ich hab doch sogar Code gepostet. Was ist Dein Problem? Wie ich schonmal erwaehnte: Falls es Dir mit CSS nicht zusagt, kannst Du dafuer gern auch Javascript benutzen, da ein solcher Hovereffekt kaum die Benutzbarkeit der Seite beeinflusst.

Natuerlich kann man mit CSS auch anderweitig tricksen. Ein zentriertes Hintergrundbild, dessen Element man verkleinert und mit einem entsprechenden Rahmen bestueckt, sieht theoretisch genauso aus, wie ein Bild das beim Hovern einen einen inneren Rahmen bekommt.

Dein Post hier schrammt nun allerdings haarscharf an der Grenze zum Doppelposting.

[Længlich]

Ashshaamad'd'a!

Ich möchte gern, dass der Rahmen, der erscheint, wenn ich mit der Maus über mein Icon fahre,

a:hover {
  border: thick white solid;
}

das Icon nicht umschließt und es damit vergrößert, sondern er soll im Icon erscheinen, sodass das Bild insgesamt nicht größer wird.

Wie Steel ganz richtig geschrieben hat, ist der Rahmen immer außen – der Effekt muß also irgendwie anders getrickst werden. Zwei Ideen (alternativ zu der von Steel):

• Eventuell kannst Du die Bilder mit clip zurechtschneiden – setzt aber absolute Positionierung voraus.
• Oder: Erstelle zusätzlich zu den Icons, die als img-Elemente vorliegen, solche, in denen der Rahmen schon eingebaut ist und verwende diese als (vom img verdeckte) Hintergrundbilder für die a-Elemente. Beim Hovern läßt Du dann die img mit visibility:hidden verschwinden, so daß der Hintergrund sichtbar wird.

Prüfe mal bitte, ob eine der beiden Ideen in Deinem Fall anwendbar ist.

Viele Grüße vom Længlich

[fabb]

Ashshaamad'd'a!

Ich möchte gern, dass der Rahmen, der erscheint, wenn ich mit der Maus über mein Icon fahre,

a:hover {
  border: thick white solid;
}

das Icon nicht umschließt und es damit vergrößert, sondern er soll im Icon erscheinen, sodass das Bild insgesamt nicht größer wird.

Wie Steel ganz richtig geschrieben hat, ist der Rahmen immer außen – der Effekt muß also irgendwie anders getrickst werden. Zwei Ideen (alternativ zu der von Steel):

• Eventuell kannst Du die Bilder mit clip zurechtschneiden – setzt aber absolute Positionierung voraus.
• Oder: Erstelle zusätzlich zu den Icons, die als img-Elemente vorliegen, solche, in denen der Rahmen schon eingebaut ist und verwende diese als (vom img verdeckte) Hintergrundbilder für die a-Elemente. Beim Hovern läßt Du dann die img mit visibility:hidden verschwinden, so daß der Hintergrund sichtbar wird.

Prüfe mal bitte, ob eine der beiden Ideen in Deinem Fall anwendbar ist.

Viele Grüße vom Længlich

Danke für deine Erklärung. Vor allem die zweite sieht sehr vielversprechend aus, bis jetzt leider noch nicht von Erfolg gekrönt:

a:hover {
      visibility: hidden;
}

<div id="icons">
<a class="icon1" href="seite1.html">Text fuer Leute ohne Grafik</a>
<a class="icon2" href="seite2.html">Text fuer Leute ohne Grafik</a>
</div>

#icons {
 position: relative;
 top: 130px;
 left: 5px;
}
#icons a {
 width:75px;
 height:75px;
 border:0;
 margin:0px;
}

.icon1 {
 background-image:url(Pfad/icon1.jpg);
}

.icon2 {
 background-image:url(Pfad/icon2.jpg);
}

Damit erreiche ich  bis jetzt leider nur, dass das ursprüngliche Icon erst flattert und dann verschwindet. Jedoch das leider ohne das eigentlich dahinter sich befindende Background-image zum Vorschein kommen zu lassen.

Grüße
frank

[Længlich]

Ali nga?

Danke für deine Erklärung. Vor allem die zweite sieht sehr vielversprechend aus, bis jetzt leider noch nicht von Erfolg gekrönt:

a:hover {
      visibility: hidden;
}

<div id="icons">
<a class="icon1" href="seite1.html">Text fuer Leute ohne Grafik</a>
<a class="icon2" href="seite2.html">Text fuer Leute ohne Grafik</a>
</div>

#icons {
position: relative;
top: 130px;
left: 5px;
}
#icons a {
width:75px;
height:75px;
border:0;
margin:0px;
}

.icon1 {
background-image:url(Pfad/icon1.jpg);
}

.icon2 {
background-image:url(Pfad/icon2.jpg);
}

Damit erreiche ich  bis jetzt leider nur, dass das ursprüngliche Icon erst flattert und dann verschwindet. Jedoch das leider ohne das eigentlich dahinter sich befindende Background-image zum Vorschein kommen zu lassen.

Ah, klar, daß es nicht geht – ich war von unterschiedlichem HTML ausgegangen. Sowas in der Art:

<div id="icons">  
 <a class="icon1" href="seite1.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>  
 <a class="icon2" href="seite2.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>  
</div>

Den Hintergrund bekommen die a-Elemente, und visibility:hidden die img-Elemente (also a:hover img).

Das Geflacker bei Dir kommt daher, daß der Link selbst beim Hovern verschwindet. Wenn er weg ist, wird nicht mehr gehovert, also erscheint er wieder und dann wird wieder gehovert usw. Das kann man immer dann passieren, wenn man ein Element beim Hovern verschwinden läßt, verschiebt oder seine Größe ändert (sprich: in irgendeiner Weise die sensitive Fläche verändert).

Viele Grüße vom Længlich

[fabb]

Ali nga?

Danke für deine Erklärung. Vor allem die zweite sieht sehr vielversprechend aus, bis jetzt leider noch nicht von Erfolg gekrönt:

a:hover {
      visibility: hidden;
}

<div id="icons">
<a class="icon1" href="seite1.html">Text fuer Leute ohne Grafik</a>
<a class="icon2" href="seite2.html">Text fuer Leute ohne Grafik</a>
</div>

#icons {
position: relative;
top: 130px;
left: 5px;
}
#icons a {
width:75px;
height:75px;
border:0;
margin:0px;
}

.icon1 {
background-image:url(Pfad/icon1.jpg);
}

.icon2 {
background-image:url(Pfad/icon2.jpg);
}

Damit erreiche ich  bis jetzt leider nur, dass das ursprüngliche Icon erst flattert und dann verschwindet. Jedoch das leider ohne das eigentlich dahinter sich befindende Background-image zum Vorschein kommen zu lassen.

Ah, klar, daß es nicht geht – ich war von unterschiedlichem HTML ausgegangen. Sowas in der Art:

<div id="icons">

<a class="icon1" href="seite1.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>
<a class="icon2" href="seite2.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>
</div>

>   
> Den Hintergrund bekommen die a-Elemente, und visibility:hidden die img-Elemente (also a:hover img).  
>   
> Das Geflacker bei Dir kommt daher, daß der Link selbst beim Hovern verschwindet. Wenn er weg ist, wird nicht mehr gehovert, also erscheint er wieder und dann wird wieder gehovert usw. Das kann man immer dann passieren, wenn man ein Element beim Hovern verschwinden läßt, verschiebt oder seine Größe ändert (sprich: in irgendeiner Weise die sensitive Fläche verändert).  
>   
> Viele Grüße vom Længlich  
>   

Danke für deine Antwort. Ich komme leider nicht weiter. Der Eintrag "Background-image" soll in die a-Elemente? Und der Hover-eintrag soll in die img-Elemente?  
Das ist mir einfach zu hoch, so weit bin ich nocht nicht.  
  
Schade, wenn es irgendwie geht, vielleicht noch einen Versuch.  
  
Grüße  
frank

[Længlich]

Haloo!

Ah, klar, daß es nicht geht – ich war von unterschiedlichem HTML ausgegangen. Sowas in der Art:

<div id="icons">

<a class="icon1" href="seite1.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>
<a class="icon2" href="seite2.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>
</div>

> >   
  

> Danke für deine Antwort. Ich komme leider nicht weiter. Der Eintrag "Background-image" soll in die a-Elemente? Und der Hover-eintrag soll in die img-Elemente?  
> Das ist mir einfach zu hoch, so weit bin ich nocht nicht.  
>   
> Schade, wenn es irgendwie geht, vielleicht noch einen Versuch.  
  
Nö, einen weiteren Versuch brauchen wir erst, wenn sich dieser als Holzweg herausstellt. ;-)  
Ich versuche es mal anhand des (vereinfachten) CSS zu erklären:  
~~~css
a  
{  
  background-image:url(das-mit-der-border-drin.jpg); /* das ohne border ist die src vom img im a und verdeckt dieses Hintergrundbild */  
}  
a:hover img  
{  
  visibility:hidden; /* Bild wird unsichtbar, wenn der Link gehovert wird, und wir nehmen nicht display:none, sonst würde das Bild keinen Platz mehr reservieren */  
}

img:hover geht aus zwei Gründen nicht: 1. versteht's der IE6 nicht (a:hover kann er, aber sonst kein hover), 2. würden wir dann wieder dasjenige Element verschwinden lassen, das den Effekt auslöst, und hätten wieder Geflacker.
Dank visibility:hidden bleibt der Platz für das img reserviert, die Fläche des Links bleibt gleich, und Geflacker bleibt aus. Das Hintergrundbild braucht auch keine Zeit mehr zum Nachladen, weil es schon am Anfang geladen wurde und bis zum Hover nur verdeckt war. Sollte so eigentlich funktionieren, wenn ich nix Fundamentales übersehen habe.

Viele Grüße vom Længlich

[fabb]

Haloo!

Ah, klar, daß es nicht geht – ich war von unterschiedlichem HTML ausgegangen. Sowas in der Art:

<div id="icons">

<a class="icon1" href="seite1.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>
<a class="icon2" href="seite2.html"><img src="..." alt="Text fuer Leute ohne Grafik" /></a>
</div>

> > >   
>   
> > Danke für deine Antwort. Ich komme leider nicht weiter. Der Eintrag "Background-image" soll in die a-Elemente? Und der Hover-eintrag soll in die img-Elemente?  
> > Das ist mir einfach zu hoch, so weit bin ich nocht nicht.  
> >   
> > Schade, wenn es irgendwie geht, vielleicht noch einen Versuch.  
>   
> Nö, einen weiteren Versuch brauchen wir erst, wenn sich dieser als Holzweg herausstellt. ;-)  
> Ich versuche es mal anhand des (vereinfachten) CSS zu erklären:  
> ~~~css

a  

> {  
>   background-image:url(das-mit-der-border-drin.jpg); /* das ohne border ist die src vom img im a und verdeckt dieses Hintergrundbild */  
> }  
> a:hover img  
> {  
>   visibility:hidden; /* Bild wird unsichtbar, wenn der Link gehovert wird, und wir nehmen nicht display:none, sonst würde das Bild keinen Platz mehr reservieren */  
> }

img:hover geht aus zwei Gründen nicht: 1. versteht's der IE6 nicht (a:hover kann er, aber sonst kein hover), 2. würden wir dann wieder dasjenige Element verschwinden lassen, das den Effekt auslöst, und hätten wieder Geflacker.
Dank visibility:hidden bleibt der Platz für das img reserviert, die Fläche des Links bleibt gleich, und Geflacker bleibt aus. Das Hintergrundbild braucht auch keine Zeit mehr zum Nachladen, weil es schon am Anfang geladen wurde und bis zum Hover nur verdeckt war. Sollte so eigentlich funktionieren, wenn ich nix Fundamentales übersehen habe.

Viele Grüße vom Længlich

Nochmals danke für deine Hilfe. Mit deinen beiden a-tags wird endlich das Hintergrundild mit breitem Rahmen angezeigt. Leider rutscht es nach unten, sodaß gerade ein Viertel sichtbar bleibt. Mit einem eintrag "display: block;" kann ich das verhindern, dann aber verschieben sich die Icons von nebeneinander nach untereinander.

Grüße
frank

[fabb]

Vielen Dank erst einmal. Letzlich hat durch die Zugabe von "display:inline;" alles seinen richtigen Platz eingenommen. Auf den ersten Blick scheint alles perfekt zu sein, doch hat sich herausgestellt, dass nun dummerweise das titel-tag fehlt. Logisch! Das erscheint ja nur beim Hovern. Doch hier wird beim Hovern ja gegen das Background-image getauscht, das kein titel-tag hat. Das allerdings sehr zu meinem Bedauern, deswegen die Frage, ob auch dem Background-image etwas in der Art eines titel-tag zugewiesen werden kann.

Ganz seltsam war für mich die Feststellung, dass von den gestalteten Icons, die ich zur Navigation auf die restlichen Pages meiner Site kopiert habe, nur das erste normal anspricht. Das Zweite verändert den Mauszeiger nur in bestimmten Bereichen zu einer Hand. Der kontextsensitive Bereich ist demnach auf ein Drittel reduziert.

Grüße
frank

[Der Martin]

Moin,

Vielen Dank erst einmal. Letzlich hat durch die Zugabe von "display:inline;" alles seinen richtigen Platz eingenommen.

für welches Element?

Auf den ersten Blick scheint alles perfekt zu sein, doch hat sich herausgestellt, dass nun dummerweise das titel-tag fehlt. Logisch! Das erscheint ja nur beim Hovern. Doch hier wird beim Hovern ja gegen das Background-image getauscht, das kein titel-tag hat. Das allerdings sehr zu meinem Bedauern, deswegen die Frage, ob auch dem Background-image etwas in der Art eines titel-tag zugewiesen werden kann.

Bitte achte auf die richtigen Begriffe Tags, Elemente und Attribute. Was du meinst, ist wohl das title-Attribut.
Und was spricht dagegen, das title-Attribut nicht dem Bild, sondern dem Link (a-Element) zuzuweisen? Und dem Bild prophylaktisch ein title="", damit nicht IrgendEin Browser in die blöde Angewohnheit zurückfällt, das alt-Attribut als Tooltip anzuzeigen.

Ganz seltsam war für mich die Feststellung, dass von den gestalteten Icons, die ich zur Navigation auf die restlichen Pages meiner Site kopiert habe, nur das erste normal anspricht. Das Zweite verändert den Mauszeiger nur in bestimmten Bereichen zu einer Hand. Der kontextsensitive Bereich ist demnach auf ein Drittel reduziert.

Das solltest du genauer beschreiben. Ich habe eine Vermutung: Solange der Link (das a-Element) seine Default-Formatierung "inline" hat, wirkt nur der reine Text- oder Bildinhalt als klickbare Fläche. Wenn du den ganzen Block hover- oder klicksensitiv haben willst, musst du auf display:block für den Link zurückkommen.

So long,
 Martin

[fabb]

Ja, aber wenn ich auf display:block für den Link zurückkomme, ändert sich meine vorher gemachte Gestaltung. Denn plötzlich stehen die verlinkten Bilder untereinander und außerdem passiert es beim Hovern, dass das Background-image zwar sichtbar wird, aber nach unten wegrutscht.

Wenn das title-Attribut der Tooltip ist, dann meine ich das. Dass ich das auch dem a-Element zuweisen kann, ist eine erfreuliche Info.

Vielleicht verbessert sich die Situation, wenn ich die Icons in eine ul stelle...

Grüße
und danke für die Infos

frank

[Længlich]

Ayú!

Ja, aber wenn ich auf display:block für den Link zurückkomme, ändert sich meine vorher gemachte Gestaltung. Denn plötzlich stehen die verlinkten Bilder untereinander und außerdem passiert es beim Hovern, dass das Background-image zwar sichtbar wird, aber nach unten wegrutscht.

Gegen das Untereinander-Stehen hilft display:inline-block oder float:left. Das mit dem Wegrutschen ist mir offen gestanden unklar. Hast Du vielleicht ein Online-Beispiel, wo man das sehen kann? Passiert es in allen Browsern oder nur in bestimmten?
Vielleicht hilft eine Angabe für vertical-align, oder eine Höhenangabe für die Links.

Wenn das title-Attribut der Tooltip ist, dann meine ich das. Dass ich das auch dem a-Element zuweisen kann, ist eine erfreuliche Info.

title ist der Tooltip und geht bei jedem (sichtbaren) Element, wird also problemlos funktionieren.

Vielleicht verbessert sich die Situation, wenn ich die Icons in eine ul stelle...

Möglich, und eine Liste ist hier wohl auch semantisch völlig in Ordnung. Die li-Elemente stehen aber per default auch erstmal untereinander, d.h. Du landest wieder bei display:inline-block oder float:left. ;-)

Viele Grüße vom Længlich

[fabb]

Ayú!

Ja, aber wenn ich auf display:block für den Link zurückkomme, ändert sich meine vorher gemachte Gestaltung. Denn plötzlich stehen die verlinkten Bilder untereinander und außerdem passiert es beim Hovern, dass das Background-image zwar sichtbar wird, aber nach unten wegrutscht.

Gegen das Untereinander-Stehen hilft display:inline-block oder float:left. Das mit dem Wegrutschen ist mir offen gestanden unklar. Hast Du vielleicht ein Online-Beispiel, wo man das sehen kann? Passiert es in allen Browsern oder nur in bestimmten?
Vielleicht hilft eine Angabe für vertical-align, oder eine Höhenangabe für die Links.

Wenn das title-Attribut der Tooltip ist, dann meine ich das. Dass ich das auch dem a-Element zuweisen kann, ist eine erfreuliche Info.

title ist der Tooltip und geht bei jedem (sichtbaren) Element, wird also problemlos funktionieren.

Vielleicht verbessert sich die Situation, wenn ich die Icons in eine ul stelle...

Möglich, und eine Liste ist hier wohl auch semantisch völlig in Ordnung. Die li-Elemente stehen aber per default auch erstmal untereinander, d.h. Du landest wieder bei display:inline-block oder float:left. ;-)

Viele Grüße vom Længlich

Wieder einmal "Danke" zunächst.
Nachdem ich die Navigation nun in eine 'ul' eingefügt habe, ist mir die Idee gekommen: Mit Gimp habe ich einen weißen Rahmen erzeugt, als png-Datei mit Transparenz verhält er sich nun wie ein richtiger Rahmen, durch den man hindurchschauen kann. Dieser soll nun zum background-image meiner Icons in der Liste werden. Nun leider funktionier aber der 'visibility:hidden' Befehl nicht mehr, denn das Vordergrundbild soll ja sichtbar bleiben. Ich dachte, ich könnte, den Background sichtbar machen ohne das andere unsichtbar machen zu müssen.
Bin ich auf dem Holzweg?

Grüße

frank

[Længlich]

Ni kwega!

Nachdem ich die Navigation nun in eine 'ul' eingefügt habe, ist mir die Idee gekommen: Mit Gimp habe ich einen weißen Rahmen erzeugt, als png-Datei mit Transparenz verhält er sich nun wie ein richtiger Rahmen, durch den man hindurchschauen kann. Dieser soll nun zum background-image meiner Icons in der Liste werden. Nun leider funktionier aber der 'visibility:hidden' Befehl nicht mehr, denn das Vordergrundbild soll ja sichtbar bleiben. Ich dachte, ich könnte, den Background sichtbar machen ohne das andere unsichtbar machen zu müssen.
Bin ich auf dem Holzweg?

So ganz klar ist mir das offen gestanden nicht, aber es klingt nach Holzweg. Den Hintergrund in irgendeiner Weise vor den Inhalt zu legen, geht jedenfalls nicht (wäre auch widersinnig ob der Definition von ›Hinter‹grund).
Eventuell kannst Du die beiden Bilder einfach vertauschen?

Viele Grüße vom Længlich

[Gunnar Bittersmann]

@@Længlich:

nuqneH

Wie Steel ganz richtig geschrieben hat, ist der Rahmen immer außen

Wenn der Rahmen keinen Platz für sich beanspruchen soll, wäre 'outline' statt 'border' zu verwenden. [CSS2 §18.4] Funktioniert bloß nicht im IE.

Qapla'

[Længlich]

Mu eri!

Wie Steel ganz richtig geschrieben hat, ist der Rahmen immer außen

Wenn der Rahmen keinen Platz für sich beanspruchen soll, wäre 'outline' statt 'border' zu verwenden. [CSS2 §18.4] Funktioniert bloß nicht im IE.

Prinzipiell richtig, und ab Version 8 kann es auch der IE. Aber davon wird das Bild nicht kleiner, also ist es wohl nicht ganz das, was der OP hier will.
Zudem kann man bei outline die vier Seiten nicht einzeln formatieren, was die Einsatzmöglichkeiten u.U. noch weiter einschränkt.

Viele Grüße vom Længlich