Discussion :

[IVIedia]

Bonjour à tous,

je viens vers vous pour vous demandé votre expertise sur ce sujets.

J’aimerai affiché une div, la div events si seulement si le contenu de cette div contient une image distante bien existence
alors on affiche dans mon fichier html la div avec son image + url.

si l'image en question n'existe pas sur internet, alors cette div ne dois pas existé dans mon fichier html

c'est possible de faire ça en html/css limite javascript?

j’espère que j'ai était un peux clair

voici mon code html/css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#events {
	display:block;
	background-color: #F00;
	width:320px;
	height:50px;
	margin-bottom:10px;
}
#content {
	display:block;
	float:left;
	background-color: #efefef;
	width:320px;
	height:480px;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="events"> 
<a href="#"><img src="image.jpg" width="320" height="50" border="0"></a> 
</div>
<div id="content">
</div>

merci et bonne journée

[IVIedia]

Re bonjour, j'ai essayé de cherché sur internet, j'ai trouvé cette solution pour le moment en javascript
je ne sais pas si c'est propre pouvez vous voir svp?

Merci

code css:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#events {
	display:block;
	background-color: #F00;
	width:320px;
	height:50px;
	margin-bottom:10px;
}
#content {
	display:block;
	float:left;
	background-color: #efefef;
	width:320px;
	height:480px;
}

code javascript:

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var myVerifImage = new Image();
myVerifImage.src="http://www.url.be/200.jpg";
if ( myVerifImage.complete){
	document.write('<div id="events"><a href="#"><img src="http://www.url.be/200.jpg" width="320" height="50" border="0"></a></div>');
} else {
        myVerifImage.src;
}

code html:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id="content">
</div>

[jisig]

Bonsoir,

À partir du moment où tu ne peux pas utiliser un langage serveur, personnellement ça me semble suffisamment propre.

Jisig.

[NoSmoking]

Bonjour,

(...)c'est possible de faire ça en html/css limite javascript?

en HTML/CSS non, en javascript effectivement.

(...)personnellement ça me semble suffisamment propre.

navré de te décevoir jisig mais la solution présentée et des plus sale
Comprendre document.write() en JavaScript.

Il me semble préférable d'utiliser les événements onload-onerror liés aux IMG pour tester si le chargement c'est bien déroulé.
- tu crées ton conteneur comme si aucune erreur ne devait se produire
- si une erreur au chargement se produit tu supprimes ce conteneur

Il ne reste plus qu'à gérer ces deux cas au travers des événements

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
var image = new Image();
image.onload = function(){
  var oDest = document.getElementById('events');
  oDest.firstChild.appendChild( this);
};
image.onerror = function(){
  alert('failed to load image');   // a SUPPRIMER bien sûr en production
  var oDest = document.getElementById('events');
  oDest.parentNode.removeChild( oDest);
};
image.src="http://www.developpez.net/template/images/logo.png";

j'attirre quand même l'attention sur au moins deux points

point #1 : le code HTML lié à cette exemple sera de la forme

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="content">
  <div id="events"><a href="#"></a></div> <!-- mettre tout à la suite pour une meilleur compatibilité browser -->
</div>

point #2 : mettre ce script en fin de fichier pour être sûr que le chargement de l'image ne se termine pas avant la création des éléments dans le DOM, on ne sait jamais!. (possibilité également de passer par un ajout sur le load du document).

exemple complet

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Chargement image</title>
<style>
#events {
    display:block;
    background-color:#F00;
    width:320px;
    height:50px;
    margin-bottom:10px;
}
#content {
    display:block;
    float:left;
    background-color:#efefef;
    width:320px;
    height:480px;
}
#events img {
    width:320px;
    height:50px;
    border: 0;
}
</style>
</head>
<body>
<div id="content">
  <div id="events"><a href="#"></a></div> <!-- mettre tout à la suite pour une meilleur compatibilité browser -->
</div>
</body>
<script>
var image = new Image();
image.onload = function(){
  var oDest = document.getElementById('events');
  oDest.firstChild.appendChild( this);
};
image.onerror = function(){
  alert('failed to load image')
  var oDest = document.getElementById('events');
  oDest.parentNode.removeChild( oDest);
};
image.src="http://www.developpez.net/template/images/logo.png";
</script>
</html>

modifie le nom de l'image pour le test.

[jisig]

Bonjour,

Merci, bien lu et compris totalement ! ^-^

Jisig.

[IVIedia]

Bonsoir,

Merci NoSmoking ça fonctionne très bien le code, est facile à comprendre,
de plus avec votre solution je sais faire une intégration facile pour un support mobile

merci encore une fois, je met le post en mode résolu