Tijden veranderen
Image Change
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<?
function getFirma(){
var firma = this.innerHTML;
document.getElementById("pic").setAttribute("src", "afbeeldingen/" + firma + "/1.jpg");
return false
}
?>
function getFirma(){
var firma = this.innerHTML;
document.getElementById("pic").setAttribute("src", "afbeeldingen/" + firma + "/1.jpg");
return false
}
?>
Wat het script doet:
Deze functie wordt aangeroepen nadat er op een link is geklikt.
Hij pakt de firma naam wat tussen <a> </a> staat.
De firma is gelijk aan de naam van het mapje waar de afbeelding in staat die hij moet laten zien. en 1.jpg heet.
vervolgens moet hij return false terug sturen omdat ik niet wil dat hij de page herlaad en opnieuw contact maakt met de server.
het probleem is dus dat hij de source van de image "pic" niet veranderd nadat ik op de link heb geklikt.
Wat doe ik hier fout?
* ipv .setAttribute heb ik ook al .src geprobeerd.
later wil ik dit script nog uitbouwen tot een slide show, maar laat m maar eerst eens de src veranderen.
Toevoeging op 16/01/2012 13:13:02:
Ik ben dmv page breaks erachter gekomen dat mijn return false niet werkt.
Hij laat de image dus wel zien, iemand een idee hoe dit op te lossen is?
Als de rest van het script nodig is dan hoor ik dat graag.
Bvd.
Ik weet niet hoe je getFirma aanroept.
Als getFirma een callback is (toegewezen aan een EventListener...), kan je this gebruiken. Als dat in de markup gebeurt kan dat niet.
Ook die return false wordt in beide gevallen op een andere manier gebruikt.
Denk er ook aan: als je een fout maakt in een functie, zal de functie niet volledig worden uitgevoerd en wordt die return false sowieso niet uitgevoerd. Je moet dus de problemen 1 voor 1 oplossen.
Kijk, ik denk dat je zoiets wil bereiken:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script>
function getFirma(elm){
var firma = elm.innerHTML;
document.getElementById("pic").src = "afbeeldingen/" + firma + "/1.jpg";
return false
}
</script>
</head>
<body>
<a href="?p=2" onclick="return getFirma(this);">Ford</a>
<a href="?p=3" onclick="return getFirma(this);">Fiat</a>
<a href="?p=4" onclick="return getFirma(this);">Ferrari</a>
<img id="pic" src=""/>
</body>
</html>
<head>
<script>
function getFirma(elm){
var firma = elm.innerHTML;
document.getElementById("pic").src = "afbeeldingen/" + firma + "/1.jpg";
return false
}
</script>
</head>
<body>
<a href="?p=2" onclick="return getFirma(this);">Ford</a>
<a href="?p=3" onclick="return getFirma(this);">Fiat</a>
<a href="?p=4" onclick="return getFirma(this);">Ferrari</a>
<img id="pic" src=""/>
</body>
</html>
... maar waarschijnlijk wil je dit niet via onclick="..." in de markup.
-----
Kan je iets van code doorsturen van hoe en waar je getFirma aanspreekt of toewijst aan een event?
Gewijzigd op 16/01/2012 14:38:54 door Kris Peeters
de code waarmee ik getFirma aanstuur is deze:
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?
function initPortfolio() {
var as = document.getElementById("content").getElementsByTagName("a");
for(var i = 1;i <= as.length; i++){
if( window.addEventListener ) {
// Modern browser
document.getElementById("link" + i).addEventListener('click', getFirma, false);
return false
}
else if( window.attachEvent ) {
// IE
document.getElementById("link" + i).attachEvent('onclick', getFirmaWin(document.getElementById("link" + i)));
}
else {
// Heel heel heel oud browser
document.getElementById("link" + i).onclick = getFirma;
}
}
}
?>
function initPortfolio() {
var as = document.getElementById("content").getElementsByTagName("a");
for(var i = 1;i <= as.length; i++){
if( window.addEventListener ) {
// Modern browser
document.getElementById("link" + i).addEventListener('click', getFirma, false);
return false
}
else if( window.attachEvent ) {
// IE
document.getElementById("link" + i).attachEvent('onclick', getFirmaWin(document.getElementById("link" + i)));
}
else {
// Heel heel heel oud browser
document.getElementById("link" + i).onclick = getFirma;
}
}
}
?>
Ik werk niet zoveel meer in javascript zonder jQuery ... ik moest het zelf opzoeken ...
( http://bytes.com/topic/javascript/answers/157500-cant-add-return-false-addeventlistener-firefox )
in plaats van return false, gebruik je evt.preventDefault();
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
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
<html>
<head>
<script>
function getFirma(evt) {
var firma = this.innerHTML;
document.getElementById("pic").src = "afbeeldingen/" + firma + "/1.jpg";
evt.preventDefault();
}
function initPortfolio() {
var as = document.getElementById("content").getElementsByTagName("a");
for(var i = 1;i <= as.length; i++) {
if( window.addEventListener ) {
// Modern browser
document.getElementById("link" + i).addEventListener('click', getFirma, false);
}
else if( window.attachEvent ) {
// IE
document.getElementById("link" + i).attachEvent('onclick', getFirmaWin(document.getElementById("link" + i)));
}
else {
// Heel heel heel oud browser
document.getElementById("link" + i).onclick = getFirma;
}
}
}
window.onload = initPortfolio;
</script>
</head>
<body>
<div id="content">
<a id="link1" href="?p=2" >Ford</a>
<a id="link2" href="?p=3" >Fiat</a>
<a id="link3" href="?p=4" >Ferrari</a>
</div>
<img id="pic" src=""/>
</body>
</html>
<head>
<script>
function getFirma(evt) {
var firma = this.innerHTML;
document.getElementById("pic").src = "afbeeldingen/" + firma + "/1.jpg";
evt.preventDefault();
}
function initPortfolio() {
var as = document.getElementById("content").getElementsByTagName("a");
for(var i = 1;i <= as.length; i++) {
if( window.addEventListener ) {
// Modern browser
document.getElementById("link" + i).addEventListener('click', getFirma, false);
}
else if( window.attachEvent ) {
// IE
document.getElementById("link" + i).attachEvent('onclick', getFirmaWin(document.getElementById("link" + i)));
}
else {
// Heel heel heel oud browser
document.getElementById("link" + i).onclick = getFirma;
}
}
}
window.onload = initPortfolio;
</script>
</head>
<body>
<div id="content">
<a id="link1" href="?p=2" >Ford</a>
<a id="link2" href="?p=3" >Fiat</a>
<a id="link3" href="?p=4" >Ferrari</a>
</div>
<img id="pic" src=""/>
</body>
</html>
Maar of dat nu ook met IE werkt, denk ik niet.
----
Ooit al aan gedacht om met jQuery te werken?
Gewijzigd op 16/01/2012 16:03:41 door Kris Peeters
Zal zelfs dat microsoft het aanbeveeld, dus dan kun je er echt niet meer onderuit. lol.
Heb het script nu wel werkend met je vorige voorbeeld door de onclick event in de link te zetten.
Wil het uitbouwen met een mooie fade. Hij fade wel, maar laten zien doet hij niet:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
misschien dat je mij hier mee verder kan helpen?
Ik weet dat hij wel door de loop gaat maar niet de pauzes neemt (of laat zien) omdat ik de i < 100 veranderd heb in i < 50 en dan wel de opacity laat zien, maar er niet mooi naar toe fade.
Enige ideetjes?
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
...
document.getElementById("pic").src = "afbeeldingen/" + firma + "/1.jpg";
fadeIn(100);
...
function fadeIn(i){
document.getElementById("pic").style.opacity = i/100;
if (i>0) {
setTimeout("fadeIn(" + (i - 1) + ")",50);
}
}
document.getElementById("pic").src = "afbeeldingen/" + firma + "/1.jpg";
fadeIn(100);
...
function fadeIn(i){
document.getElementById("pic").style.opacity = i/100;
if (i>0) {
setTimeout("fadeIn(" + (i - 1) + ")",50);
}
}
Zo laat je fadeIn zichzelf aanroepen.
Gewijzigd op 16/01/2012 17:16:57 door Kris Peeters
Maar heb je ook enig idee waarom het beeld flikkert.
Hij springt soms weer op no-opacity lijkt het.
verder werkt het super!
Toevoeging op 16/01/2012 21:17:14:
Sorry, ik heb het verkeerd toegepast.
Nog wel een vraag. Hoe check ik of de source van een image daadwerkelijk bestaat?
Zal voor mij de laatste vraag worden :)