Problème d'affichage des images - html5, css3, javascript
Résolu
uqtrhgr
Messages postés
3
Statut
Membre
-
uqtrhgr Messages postés 3 Statut Membre -
uqtrhgr Messages postés 3 Statut Membre -
Bonjour !
Actuellement, je suis désespérée. Haha.
Non sérieusement, j'ai comme un souci ; voici mon site perso, en construction : carolinebrun.fr
Je travaille essentiellement sur Safari, où les images de la page d'accueil s'affichent correctement (une image clair en image en base, dont l'opacité revient à 100% en hover)
Seulement, sur IE, Chrome et Firefox, pas moyen... Pas d'images, rien !
Je suis dessus depuis tellement longtemps que je comprends plus rien, même pas ce que j'ai fait pour le moment :p
Donc, voici mon code, où j'ai utilisé html, css et les fonctions prédéfinies javascript de dreamweaver :
J'offre un cookie à quiconque pourra me sortir du misérable gouffre dans lequel je me trouve ! T__T
J'ai eu beau checker mon pote google et le présent site, dur dur...
Actuellement, je suis désespérée. Haha.
Non sérieusement, j'ai comme un souci ; voici mon site perso, en construction : carolinebrun.fr
Je travaille essentiellement sur Safari, où les images de la page d'accueil s'affichent correctement (une image clair en image en base, dont l'opacité revient à 100% en hover)
Seulement, sur IE, Chrome et Firefox, pas moyen... Pas d'images, rien !
Je suis dessus depuis tellement longtemps que je comprends plus rien, même pas ce que j'ai fait pour le moment :p
Donc, voici mon code, où j'ai utilisé html, css et les fonctions prédéfinies javascript de dreamweaver :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Caroline Brun</title>
<style>
body {
background-color: #ececec;
font-family: 'Didot';
font-size:16px;
}
.entete {
position:absolute;
margin-left: 12.5%;
margin-top: 80px;
}
.apropos {
position:absolute;
margin-left: 70%;
margin-top: 100px;
}
.contact {
position: absolute;
margin-top: 100px;
margin-left: 82%;
}
.web {
position: absolute;
margin-left: 12.5%;
margin-top: 27.4%;
}
.graphisme {
position: absolute;
margin-left: 31.6%;
margin-top: 27.4%;
}
.video {
position: absolute;
margin-left: 50.9%;
margin-top: 27.4%;
}
.photographie {
position: absolute;
margin-left: 70.4%;
margin-top: 27.4%;
}
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body onLoad="MM_preloadImages('graphsmehover.jpg','videohover.png','photohover.gif')">
<div class="entete">
Caroline Brun//.
<br>
Design Numérique
</div>
<div class="apropos">
À propos
</div>
<div class="contact">
Contact
</div>
<div class="web">
<a href="web.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('web','','webhover.png',1)"><img src="web.gif" width="170" height="289" id="web"></a> </div>
<div class="graphisme">
<a href="../Site (true)/graphisme.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('graphisme','','graphismehover.png',1)"><img src="graphisme.png" width="170" height="290" id="graphisme"></a></div>
<div class="video">
<a href="video.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('video','','videohover.png',1)"><img src="video.png" width="170" height="289" id="video"></a> </div>
<div class="photographie">
<a href="photographie.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('photographie','','photohover.gif',1)"><img src="photo.gif" width="170" height="289" id="photographie"></a></div>
</body>
</html>
J'offre un cookie à quiconque pourra me sortir du misérable gouffre dans lequel je me trouve ! T__T
J'ai eu beau checker mon pote google et le présent site, dur dur...
A voir également:
- Problème d'affichage des images - html5, css3, javascript
- Des images - Guide
- Affichage double ecran - Guide
- Problème affichage fenêtre windows 10 - Guide
- Windows 11 affichage classique - Guide
- Problème affichage page internet google chrome - Forum Téléphones & tablettes Android
3 réponses
Bonjour,
le code source de la page indiquée montre que tu appelle les images au format .psd qui n'est pas pris en charge par les navigateur web.
le code source de la page indiquée montre que tu appelle les images au format .psd qui n'est pas pris en charge par les navigateur web.