image over image

[baws]

Hallo,

ik heb een afbeelding met de css.

Height:175px;
max-width:96%;

nu wil ik een afbeelding van 25 px x 25px linksboven in de hoek als knop als je met de muis over de afbeelding gaat.
kan iemand mij in de richting helpen.
het moet dus een knop worden links boven in de hoek van elke afbeelding bij mouseover.

op deze pagina Voorbeeld staat het zoals ik het wil

 

[csshunter]

Zoiets?:

<div class="imgContainer">
	<img src="images/grotejongen.jpg">
	<a href="linkieblue.htm" title="Klik voor ..."></a>
</div>
<div class="imgContainer">
	<img src="images/grotemeid.jpg">
	<a href="linkiepink.htm" title="Klik voor ..."></a>
</div>
... enz.

met in de css:

.imgContainer {
    position: relative;
    }
.imgContainer a {
    position: absolute;
    left: 0;
    top: 0;
    width: 25px;
    height: 25px;
    display: block;
    }
.imgContainer:hover a,
.imgContainer:focus a {
    background: url(images/knopje.png);
    }

 

[baws]

Ok het lijkt er wel op dat het goed is maar hoe zorg ik ervoor dat de afbeelding max 175 height + max-width:96%; heeft?
ik heb al een div subafbeeldingen met daarin de div subafbeelding met de volende css



#subafbeeldingen{
width:97%;
float:left;
margin-top:20px;
background-color:#c2c0c0;
padding-bottom:20px;
}


#subafbeelding {
margin-left:1%;
background-color:#c2c0c0;
margin-top:25px;
float:left;
}

#subafbeelding img{
height:175px;
min-height:175px;
max-width:96%;
max-height:96%;
}


de afbeeldingen zijn nu allemaal precies 175px hoog en floaten allemaal netjes langs elkaar met een kleine ruimte 1% er tussen.
hier wil ik per afbeelding die "knop" over hebben om een link te plaatsen naar als favourit toevoegen.
ik heb een fiddle gemaakt

Fiddle

 

[csshunter]

Hoi baws,
Dan voeg je die regels toe aan m'n voorbeeldje. Om niet de hover te laten werken over de volle breedte, maar alleen op de images, is nog een extra <div>'je nodig.
En als er meer dingen van hetzelfde zijn, mag het niet dezelfde id="..." zijn, maar moet het een class="..." worden.

Aldus: deze jsfiddle.net/9auEQ/4/

Met vriendelijke groet,
CSShunter

[edit]Herstel! Ze floaten nu nog niet naast elkaar. Wordt vervolgd![/edit]

Vervolg:
Dan kan de binnen-div gemist woden: jsfiddle.net/9auEQ/6/

 

[baws]

Ok zo ziet het eruit zoals ik wil, wat is het nut van .imgContainer div {}.
Dus van de tag div achter de classnaam

 

[baws]

Oja en als ik de afbeelding zelf ook als link wil dus dat als ze op de afbeelding zelf klikken dat een link werkt nu als ik een link plaats om de afbeelding gaan afbeeldingen naar links in elkaar.

Fiddle http://jsfiddle.net/9auEQ/7/

Ik heb al een class none gegeven maar dit maakt geen verschil.

Het is dus de bedoeling dat de knop (favoriet een andere actie heeft als op de afbeelding zelf klikken)

 

[csshunter]

Hoi baws,

Ad nr. #5:
Die extra binnen-div stond in de eerste versie, en bleek toch niet nodig (de Edit-versie van fiddle 6 is de goede).
Maar in het algemeen betekent .imgContainer div {...}: de styles voor alle <div>'s die binnen een element met class="imgContainer" zitten.

• Je zou die div's ook allemaal eenzelfde nieuwe class kunnen geven, maar zo pak je ze meteen allemaal tegelijk: spaart werk en extra html-code.

Ad nr. #6:
Een class="none" werkt niet, als je in de css geen opdrachten .none {...} hebt gegeven!

Er zijn nu twee verschillende soorten links: de <a> van het img om het te vergroten, en de <a> voor het favoriet maken.
Je kunt eerst alle <a>'s de stijl geven van het favorieten-blokje, en dan dat voor de <a>'s van de images weer ongedaan maken met een eigen class.
Maar je kunt het handiger andersom doen: de <a>'s van de afbeelding hebben geen stijl nodig, dat gaat vanzelf goed. Dan hoeven alleen de <a>'s van de favorieten een class="fav" te krijgen met de speciale dingen (= de oude algemene dingen).

• Hier is ie: jsfiddle.net/9auEQ/10

Met vriendelijke groet,
CSShunter
__________
PS: De php zal wel aangepast moeten worden, maar daar gaat het hier niet om.