CSS hover
Weet iemand de oplossing hiervoor?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div id="portfolio_foto">
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/<? echo $vergrootglas;?>.png"/>
</a>
</div>
.vergrootglasbutton_blauw
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_oranje
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_groen
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/<? echo $vergrootglas;?>.png"/>
</a>
</div>
.vergrootglasbutton_blauw
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_oranje
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_groen
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
Gewijzigd op 26/05/2011 21:45:44 door Mitchoit Patron
Code (php)
1
.vergrootglasbutton_groen a:hover
PHP Scripter op 26/05/2011 21:48:09:
Code (php)
1
.vergrootglasbutton_groen a:hover
Werkt niet...
@Mitchoit, dit kan je gewoon doen zoals met een anchor tag:
Code (php)
1
img:hover
Zodra je een afbeelding wilt wijzigen bij hover kun je 2 dingen doen:
1) Zet de afbeelding als een background, deze kun je wijzigen met CSS
2) Ga werken met javascript onMouseOver en onMouseOut.
Wouter J op 26/05/2011 21:56:39:
@PHP scripter, die code is totaal fout. Allereerst vraagt de TS om een hover op een IMaGe tag. Ten tweede is er geen Anchor tag in een class vergrootglasbutton_groen.
@Mitchoit, dit kan je gewoon doen zoals met een anchor tag:
Zodra je een afbeelding wilt wijzigen bij hover kun je 2 dingen doen:
1) Zet de afbeelding als een background, deze kun je wijzigen met CSS
2) Ga werken met javascript onMouseOver en onMouseOut.
@Mitchoit, dit kan je gewoon doen zoals met een anchor tag:
Code (php)
1
img:hover
Zodra je een afbeelding wilt wijzigen bij hover kun je 2 dingen doen:
1) Zet de afbeelding als een background, deze kun je wijzigen met CSS
2) Ga werken met javascript onMouseOver en onMouseOut.
Ja alleen ik heb meerdere afbeeldingen en op andere afbeeldingen moet geen hover moet ik dan nog iets ervoor zetten?
edit
Als je dan vervolgens sprites gebruikt, is je website helemaal efficient, en krijg je geen flikkerende toestanden omdat het plaatje nog niet ingeladen is.
Gewijzigd op 27/05/2011 00:03:00 door Pieter van Linschoten
Dus die regel word meerdere keren gelezen en uitgevoerd maar of je het nou 10x neerzet of 1x maar voglens mij niks uit?
Ksnap zelf eigenlijk echt niet waarom die het zou niet doet, terwijl die het zo bij een linkje wel doet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div id="portfolio_foto">
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/<?php echo $vergrootglas; ?>.png"/>
</a>
<div id="Titel"><? echo $data['Titel'];?></div>
</div>
#portfolio_foto
{
float:left;
margin-top:40px;
margin-left:40px;
}
.vergrootglasbutton_blauw
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_blauw img:hover
{
background-image:url(website_onderdelen/vergrootglasbutton_roze.png);
}
.vergrootglasbutton_oranje
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_groen
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
<img class="zoom" alt="" src="Images/images/<? echo $data['Foto'];?>"/>
<a rel="detail_zoom" href="website_onderdelen/<? echo $data['Foto'];?>" title="<?php echo $data['Titel'];?>">
<img class="<?php echo $vergrootglas; ?>" alt="" src="website_onderdelen/<?php echo $vergrootglas; ?>.png"/>
</a>
<div id="Titel"><? echo $data['Titel'];?></div>
</div>
#portfolio_foto
{
float:left;
margin-top:40px;
margin-left:40px;
}
.vergrootglasbutton_blauw
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_blauw img:hover
{
background-image:url(website_onderdelen/vergrootglasbutton_roze.png);
}
.vergrootglasbutton_oranje
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
.vergrootglasbutton_groen
{
margin-left:-50px;
margin-bottom:22px;
border:0px;
}
Sander A op 28/05/2011 15:14:51:
.vergrootglasbutton_blauw:hover werd er net al aangegeven, daarnaast gebruik je nog geen sprites
Dan werkt het nog steeds niet en ik heb nu ook sprites toegepast....
Wouter J op 28/05/2011 17:30:59:
Zucht, je wilt een src van een afbeelding wijzigen niet de background. Kijk eens naar mijn posts en pak 1 van de 2 afbeeldingen.
Met javascript was het me al gelukt alleen met hovers werken lijkt me mooier maarja dan maar zo...
onMouseOver/Out is trouwens de javascript versie van hover, dus je werkt al met hovers.