Hoe pak ik dit aan?
Voor mouseover:
Na mouseover op de middelste (Heren) schoen:
en dit dan voor alle 3 de schoenen... Ik heb al verschillende dingen geprobeerd maar niks werkt... Heeft iemand een idee? Heb geen code nodig maar een idee van hoe ik dit aan moet pakken, code doe ik zelf wel. :)
Misschien dat het werkt met een link en dan een hover?
En anders misschien met javascript? Dus een divje laten zien met mouseover ofzo?
Alle 3 je images in 3 gelijke delen knippen (9 images totaal)
On mouseover gewoon in het betreffende deel de juiste image weergeven
Dan kun je gewoon werken met 3 divs naast elkaar en een mouse over :)
Tevens even tekst los koppelen van image (losse image) mischien :)
Hopelijk heb je er wat aan
Toevoeging op 20/03/2012 13:45:07:
Beide bedankt voor de snelle reactie, jullie denken precies zoals ik dacht maar krijg het op die manier niet voor elkaar.. :p
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
leftImage = array("liKid.png" , "liGent.png" , "liLady.png")
rightImage = array("riKid.png" , "riGent.png" , "riLady.png")
midImage = array("miKid.png" , "miGent.png" , "miLady.png")
function mouseoverimg(imgpos)
{
document.getElementById("left").style.background = leftImage[imgpos]
document.getElementById("mid").style.background = midImage[imgpos]
document.getElementById("right").style.background = rightImage[imgpos]
}
function mouseoutimg()
{
document.getElementById("left").style.background = leftImage[0]
document.getElementById("mid").style.background = midImage[1]
document.getElementById("right").style.background = rightImage[2]
}
<div id="left" onmouseover="mouseoverimg(0)"></div>
<div id="mid" onmouseover="mouseoverimg(1)"></div>
<div id="right" onmouseover="mouseoverimg(2)"></div>
rightImage = array("riKid.png" , "riGent.png" , "riLady.png")
midImage = array("miKid.png" , "miGent.png" , "miLady.png")
function mouseoverimg(imgpos)
{
document.getElementById("left").style.background = leftImage[imgpos]
document.getElementById("mid").style.background = midImage[imgpos]
document.getElementById("right").style.background = rightImage[imgpos]
}
function mouseoutimg()
{
document.getElementById("left").style.background = leftImage[0]
document.getElementById("mid").style.background = midImage[1]
document.getElementById("right").style.background = rightImage[2]
}
<div id="left" onmouseover="mouseoverimg(0)"></div>
<div id="mid" onmouseover="mouseoverimg(1)"></div>
<div id="right" onmouseover="mouseoverimg(2)"></div>
Zoiets in grote lijnen
Syntaxfouten voorbehouden
Gewijzigd op 20/03/2012 13:55:42 door Jacco Engel
Toevoeging op 20/03/2012 14:28:47:
https://www.hummelsport.nl/shop/ (2de slide in de slider..)
code:
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script type="text/javascript">
leftImage = array("images/sliderimages/1a.jpg" , "images/sliderimages/1b.jpg" , "images/sliderimages/1c.jpg")
middelsteImage = array("images/sliderimages/2a.jpg" , "images/sliderimages/2b.jpg" , "images/sliderimages/2c.jpg")
rechterImage = array("images/sliderimages/3a.jpg" , "images/sliderimages/3b.jpg" , "images/sliderimages/3c.jpg")
function mouseoverimg(imgpos)
{
document.getElementById("linker").style.background = linkerImage[imgpos]
document.getElementById("middelste").style.background = middelsteImage[imgpos]
document.getElementById("rechter").style.background = rechterImage[imgpos]
}
function mouseoutimg()
{
document.getElementById("linker").style.background = linkerImage[0]
document.getElementById("middelste").style.background = middelsteImage[1]
document.getElementById("rechter").style.background = rechterImage[2]
}
</script>
<style type="text/css">
#linker {
width: 344px;
height: 560px;
margin: 0;
padding: 0;
background-image: url(images/sliderimages/1a.jpg);
}
#middelste {
width: 275px;
height: 560px;
margin: 0;
padding: 0;
background-image: url(images/sliderimages/2a.jpg);
}
#rechter {
width: 341px;
height: 560px;
margin: 0;
padding: 0;
background-image: url(images/sliderimages/3a.jpg);
}
</style>
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="linker" onmouseover="mouseoverimg(0)"></td>
<td id="middelste" onmouseover="mouseoverimg(1)"></td>
<td id="rechter" onmouseover="mouseoverimg(2)"></td>
</tr>
</table>
leftImage = array("images/sliderimages/1a.jpg" , "images/sliderimages/1b.jpg" , "images/sliderimages/1c.jpg")
middelsteImage = array("images/sliderimages/2a.jpg" , "images/sliderimages/2b.jpg" , "images/sliderimages/2c.jpg")
rechterImage = array("images/sliderimages/3a.jpg" , "images/sliderimages/3b.jpg" , "images/sliderimages/3c.jpg")
function mouseoverimg(imgpos)
{
document.getElementById("linker").style.background = linkerImage[imgpos]
document.getElementById("middelste").style.background = middelsteImage[imgpos]
document.getElementById("rechter").style.background = rechterImage[imgpos]
}
function mouseoutimg()
{
document.getElementById("linker").style.background = linkerImage[0]
document.getElementById("middelste").style.background = middelsteImage[1]
document.getElementById("rechter").style.background = rechterImage[2]
}
</script>
<style type="text/css">
#linker {
width: 344px;
height: 560px;
margin: 0;
padding: 0;
background-image: url(images/sliderimages/1a.jpg);
}
#middelste {
width: 275px;
height: 560px;
margin: 0;
padding: 0;
background-image: url(images/sliderimages/2a.jpg);
}
#rechter {
width: 341px;
height: 560px;
margin: 0;
padding: 0;
background-image: url(images/sliderimages/3a.jpg);
}
</style>
<table width="960" border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="linker" onmouseover="mouseoverimg(0)"></td>
<td id="middelste" onmouseover="mouseoverimg(1)"></td>
<td id="rechter" onmouseover="mouseoverimg(2)"></td>
</tr>
</table>
Het is nogal klote gezien ze met Widgetkit werken in een joomla... Deze slider pakt namelijk mijn div's niet. Hierin is alleen te werken met tabellen.
Het werkt nog altijd niet, iemand een idee?
Toevoeging op 20/03/2012 14:33:26:
Apparte pagina gemaakt om slider werkend te krijgen:
http://www.hummelsport.nl/shop/slider.html
Gewijzigd op 20/03/2012 14:37:41 door Joran den Houting
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html public>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hummel Test</title>
<meta name="robots" content="noindex, noarchive" />
<style type="text/css">
#schoen {
width: 960px;
height: 560px;
overflow: hidden;
}
#schoen a {
float: left;
display: block;
height: 560px;
overflow: hidden;
}
#schoen a#kids {
width: 344px;
background: url(test-bg.jpg) no-repeat left top;
}
#schoen a#heren {
width: 275px;
background: url(test-bg.jpg) no-repeat center center;
}
#schoen a#dames {
width: 341px;
background: url(test-bg.jpg) no-repeat right bottom;
}
</style>
<script type="text/javascript">
function mouseOver(element) {
if (element == 'kids') {
document.getElementById('kids').style.backgroundPosition = 'left top';
document.getElementById('heren').style.backgroundPosition = 'center top';
document.getElementById('dames').style.backgroundPosition = 'right top';
} else if (element == 'heren') {
document.getElementById('kids').style.backgroundPosition = 'left center';
document.getElementById('heren').style.backgroundPosition = 'center center';
document.getElementById('dames').style.backgroundPosition = 'right center';
} else if (element == 'dames') {
document.getElementById('kids').style.backgroundPosition = 'left bottom';
document.getElementById('heren').style.backgroundPosition = 'center bottom';
document.getElementById('dames').style.backgroundPosition = 'right bottom';
}
}
function mouseOut() {
document.getElementById('kids').style.backgroundPosition = 'left top';
document.getElementById('heren').style.backgroundPosition = 'center center';
document.getElementById('dames').style.backgroundPosition = 'right bottom';
}
</script>
</head>
<body>
<div id="schoen">
<a href="#" id="kids" title="kids" onmouseover="mouseOver('kids')" onmouseout="mouseOut()"></a>
<a href="#" id="heren" title="heren" onmouseover="mouseOver('heren')" onmouseout="mouseOut()"></a>
<a href="#" id="dames" title="dames" onmouseover="mouseOver('dames')" onmouseout="mouseOut()"></a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hummel Test</title>
<meta name="robots" content="noindex, noarchive" />
<style type="text/css">
#schoen {
width: 960px;
height: 560px;
overflow: hidden;
}
#schoen a {
float: left;
display: block;
height: 560px;
overflow: hidden;
}
#schoen a#kids {
width: 344px;
background: url(test-bg.jpg) no-repeat left top;
}
#schoen a#heren {
width: 275px;
background: url(test-bg.jpg) no-repeat center center;
}
#schoen a#dames {
width: 341px;
background: url(test-bg.jpg) no-repeat right bottom;
}
</style>
<script type="text/javascript">
function mouseOver(element) {
if (element == 'kids') {
document.getElementById('kids').style.backgroundPosition = 'left top';
document.getElementById('heren').style.backgroundPosition = 'center top';
document.getElementById('dames').style.backgroundPosition = 'right top';
} else if (element == 'heren') {
document.getElementById('kids').style.backgroundPosition = 'left center';
document.getElementById('heren').style.backgroundPosition = 'center center';
document.getElementById('dames').style.backgroundPosition = 'right center';
} else if (element == 'dames') {
document.getElementById('kids').style.backgroundPosition = 'left bottom';
document.getElementById('heren').style.backgroundPosition = 'center bottom';
document.getElementById('dames').style.backgroundPosition = 'right bottom';
}
}
function mouseOut() {
document.getElementById('kids').style.backgroundPosition = 'left top';
document.getElementById('heren').style.backgroundPosition = 'center center';
document.getElementById('dames').style.backgroundPosition = 'right bottom';
}
</script>
</head>
<body>
<div id="schoen">
<a href="#" id="kids" title="kids" onmouseover="mouseOver('kids')" onmouseout="mouseOut()"></a>
<a href="#" id="heren" title="heren" onmouseover="mouseOver('heren')" onmouseout="mouseOut()"></a>
<a href="#" id="dames" title="dames" onmouseover="mouseOver('dames')" onmouseout="mouseOut()"></a>
</div>
</body>
</html>
en dan met deze afbeelding: http://img214.imageshack.us/img214/976/testbgs.jpg
Toevoeging op 20/03/2012 17:31:30:
Volgens mij kan het zelfs nog zonder javascript, zal ik vanavond even na kijken.
Namelijk:
<div 1> Kinderschoen
<div 2> Heren
<div 3> Dames
Normaal toon je <div 1> met 33% breedte op Z-index: 1;
Zo ook de andere 2 divs.
Bij een :hover geef je de div een width van 100% (kan ook 600px zijn bijvoorbeeld) en een Z-index van 3.
Als je dan uithovert gaat het weer terug naar 'oude' situatie.
Is even puzzelen, maar moet werken.
Kan natuurlijk ook met tabellen, maar dat is NIET aan te raden.
Dan kan je beter een blank.png nemen (vast formaat, bijvoorbeeld 200px) met als achtergrond die heel schoen.
Bij de :hover verschuif je de achtergrondpositie zodat het goed past.
(lijsten zijn mooier dan divisions in dit geval (wat eddy voorstelde))
Toevoeging op 20/03/2012 20:01:53:
Even een voorbeeldje met alleen CSS gemaakt: http://phphulp.wouterj.nl/shoes/
(lijsten zijn mooier dan divisions in dit geval (wat eddy voorstelde))