Aller au contenu
Choisir la langue
Aller à la recherche

Forums des Zéros

Une question ? Pas de panique, on va vous aider !

Liste des forums

Partage

Assemblage d'images qui craint sous IE

Sous FF / Opera aucun problème...

28 mai 2007 à 7:35:55

Bonjour,

Voilà, c'est la deuxième fois que ce problème très génant m'arrrive: j'ai eu l'idée de me faire mon propre système de vision de photo uniquement en html (+ js pour les aggrandissements). J'ai donc prit une image de mon apn de dos, et je l'ai découpée.

Schéma:

Image utilisateur

Image utilisateur

Problème sous IE:

Image utilisateur

Image utilisateur

Le code (tableaux... pas de morale siouplaît

- A moins que vous arriviez à coder ça sémantiquement

)

<table width="335" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td rowspan=8>
<img src="images/viewer_01.png" width="36" height="215" border="0"></td>
<td rowspan=2>
<img src="images/viewer_02.png" width="173" height="52" border="0"></td>
<td rowspan=8>
<img src="images/viewer_03.png" width="12" height="215" border="0"></td>
<td colspan=2>

<a href="photos/grandes/photo_1.jpg" rel="lightbox"><img onClick src="images/viewer_04.png" width="46" height="7" border="0" /></a>
</td>
<td rowspan=4>
<img src="images/viewer_05.png" width="21" height="111" border="0"></td>
<td rowspan=3>
<img src="images/viewer_06.png" width="47" height="108" border="0"></td>
<td>
<img src="images/spacer.gif" width="1" height="7" border="0"></td>
</tr>
<tr>
<td colspan=2 rowspan=2>
<img src="images/viewer_07.png" width="46" height="101" border="0"></td>
<td>
<img src="images/spacer.gif" width="1" height="45" border="0"></td>
</tr>
<tr>
<td rowspan="5">

<a href="photos/grandes/photo_1.jpg" rel="lightbox" title="Un clochard dans le métro parisien..."><img src="photos/petites/photo_1.jpg" width=173 height=132 border="0" border="0"></td></a>
<td>
<img src="images/spacer.gif" width="1" height="56" border="0"></td>
</tr>
<tr>
<td rowspan=3>
<img src="images/viewer_09.png" width="21" height="37" border="0"></td>
<td rowspan=3>

<a href="#"><img src="images/viewer_10.png" width="25" height="37" border="0" border="0"></a>

</td>
<td rowspan=3>

<a href="viewer_2.html"><img src="images/viewer_11.png" width="47" height="37" border="0" border="0"></a>
</td>
<td>
<img src="images/spacer.gif" width="1" height="3" border="0"></td>
</tr>
<tr>
<td>
<img src="images/viewer_12.png" width="21" height="28" border="0"></td>
<td>
<img src="images/spacer.gif" width="1" height="28" border="0"></td>
</tr>
<tr>
<td rowspan=3>
<img src="images/viewer_13.png" width="21" height="76" border="0"></td>
<td>
<img src="images/spacer.gif" width="1" height="6" border="0"></td>
</tr>
<tr>
<td colspan=2 rowspan=2>
<img src="images/viewer_14.png" width="46" height="70" border="0"></td>
<td rowspan=2>
<img src="images/viewer_15.png" width="47" height="70" border="0"></td>
<td>
<img src="images/spacer.gif" width="1" height="39" border="0"></td>
</tr>
<tr>
<td>
<img src="images/viewer_16.png" width="173" height="31" border="0"></td>
<td>
<img src="images/spacer.gif" width="1" height="31" border="0"></td>
</tr>
</table>

Donc, j'ai essayé par tous les moyens de rendre ça compatible sous IE et je vois en vous ma dernière chance (

)... Pour vous aider, je crois bien que ce sont les images liens qui font cet effet à IE (l'ensemble sans les liens passait normalement, si mes souvenirs sont bons...). Pour régler ce problème j'avais essayé <img onClick="2.jpg" rel="Lightbox" src="1.jpg" />, mais ça n'a rien reglé

Donc j'espère vivement un coup de main, et j'aiderais de tout mon possible en retour mon sauveur >_<

>_<

en matière de design principalement

Merci d'avance !

EDIT: C'est peut-être mieux avec le lien non ?

28 mai 2007 à 9:04:09

Salut,
si j'avais eu à faire ça j'aurai fait un truc du genre:

<div id="global">
<p><img src="apn/apn.png" alt="apn" usemap="#Map" /></p>
<map name="Map" id="Map">
<area shape="rect" coords="238,116,251,134" href="" alt="" />
<area shape="rect" coords="303,116,316,135" href="" alt="" />
</map>
</div>

<div id="miniature_photo">
<p><img src="apn/viewer_fichiers/photo_1.jpg" alt="" /></p>
</div>

* {
margin: 0;
border: 0;
padding: 0;
}
#global {
position: relative;
width: 335px;
height: 215px;
}
#miniature_photo {
height: 132px;
width: 173px;
position: absolute;
top: 52px;
left: 48px;
}

28 mai 2007 à 14:52:36

C'est impossible à tout calculer les positions...

Et je voudrais aussi savoir si ces coordonnées sont relatives à #map ou à la page entière (depuis 0,0 ?)

28 mai 2007 à 15:04:47

Pourquoi, tu veux que tous les boutons de ton APN soientt cliquables ?

Les coordonnées sont relatives a l'images entière mappèe.
Si tu mets 0 0 100 100 cela fera un carré de 100px en haut à gauche de l'image.

7 juin 2007 à 17:13:51

Je ne comprends pas trop les principes de map, donc j'aimerais bien avoir une autre solution plus conventionnelle, ou alors un coup de main pour mapper tout ça :s

8 juin 2007 à 5:41:40

contacte moi via MP on en reparlera.

Assemblage d'images qui craint sous IE

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.