Hoe pak ik dit aan?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Joran den Houting

Joran den Houting

20/03/2012 13:32:48
Quote Anchor link
ZOals de afbeelding hieronder moet ik dus 3 verschillende schoenen in laten weergeven. Alleen als je dan bijvoorbeeld op 1 van de div'jes gaat staan dan moet er met een mouseover voor worden gezorgt dat de andere 2 opgevult worden met de rest van de betreffende schoen. Ik weet het het is moeilijk uit te leggem maar zal het zo laten zien:

Voor mouseover:
Afbeelding

Na mouseover op de middelste (Heren) schoen:
Afbeelding

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. :)
 
PHP hulp

PHP hulp

19/05/2024 17:04:53
 
Rolf -

Rolf -

20/03/2012 13:40:33
Quote Anchor link
Ik denk dat je dit het makkelijkste kunt doen met css.
Misschien dat het werkt met een link en dan een hover?

En anders misschien met javascript? Dus een divje laten zien met mouseover ofzo?
 
Jacco Engel

Jacco Engel

20/03/2012 13:43:29
Quote Anchor link
Mischien een verkeerd id maar toch ff posten

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
 
Joran den Houting

Joran den Houting

20/03/2012 13:44:06
Quote Anchor link
Nouja ik heb 3 div's met elk een achtergrond erin. Stel ik ga op de middelste (nummer 2) staan, dan moet dus de achtergrond van div 1 en 3 veranderen. Maar zodra je er met de muis af gaat moeten ze wel weer terug springen, dit zal dus helaas niet alleen met css gaan :(

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
 
Jacco Engel

Jacco Engel

20/03/2012 13:54:28
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Zoiets in grote lijnen

Syntaxfouten voorbehouden
Gewijzigd op 20/03/2012 13:55:42 door Jacco Engel
 
Joran den Houting

Joran den Houting

20/03/2012 14:06:47
Quote Anchor link
Hmmm ga zoiets even proberen uit te werken, bedankt Jacco!

Toevoeging op 20/03/2012 14:28:47:

https://www.hummelsport.nl/shop/ (2de slide in de slider..)

code:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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>



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
 
Joakim Broden

Joakim Broden

20/03/2012 17:16:31
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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>


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.
 
Eddy E

Eddy E

20/03/2012 18:09:19
Quote Anchor link
Je zou inderdaad met puur CSS genoeg kunnen doen.

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.
 
Wouter J

Wouter J

20/03/2012 20:01:38
Quote Anchor link
Even een voorbeeldje met alleen CSS gemaakt: http://phphulp.wouterj.nl/shoes/

(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))
 
Joran den Houting

Joran den Houting

29/03/2012 10:52:11
Quote Anchor link
Heel erg bedankt voor het voorbeeld! Ga dit verder uitwerken en wat dingen proberen!
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.