Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Erreur sur une redirection via un click sur une image

15 réponses
Avatar
HD
Bonjour,

Je voudrais pouvoir être redirigé vers mon site lorsque je clique sur une
image... J'ai voulu utilisé ce script:
<img src="dep-02.gif"
onclick="javascript:parent.main.location.href='http://www.monsite.fr/';"
ALT="MonSite">
Mais j'ai constamment Internet Explorer qui m'affiche une erreur sur la page
lorsque je clique sur l'image.

Avez vous une idée du problème ? Je pense que je dois mal utiliser quelque
chose...

Merci d'avance pour votre aide
--
@+
HD

5 réponses

1 2
Avatar
SAM
Le 26/07/11 15:11, HD a écrit :
Pour le onmouseover, je voudrais pouvoir faire un effet zoom ou recolorisé
de l'image du département... par contre, les images de chacun des
départements n'ont pas la même taille... ce sont des images récupérées
d'un ancien travail (pour gagner du temps).



Exemple ici avec le département 60 :
<div id="d60" style="position:absolute; left:192px; top:61px"><img
src="dp/dp60.gif" width="39" height="29"
onclick="window.open('http://www.monssite.fr/');"></div>



Ça aurait été sympa de ne pas faire ouvrir une nouvelle fenêtre !

Savez vous si il serait faisable d'ajouter un effet zoom ou recolorisé...
sans avoir à reprendre toutes les images des départements à recolorisé en 2e
image rollover et sans avoir à créer un script où il me faudrait taper
toutes tailles de chacun de mes départements. Celà m'éviterait un long
travail.




tu n'as absolument pas à avoir à indiquer les tailles si ce sont des
images qui sont à afficher

CSS :
====
div {
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
-webkit-opacity: 0.7;
opacity: 0.7;
filter:alpha(opacityp);
}
div.on {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
filter:alpha(opacity0);
}

JS :
===
function roll() {
this.className = this.className==''? 'on' : '';
}

window.onload = function() {
var d = document.body.getElementsByTagName('DIV'), n = d.length;
while(n--) {
d[n].onmouseover = roll;
d[n].onmouseout = roll;
}
}



--
Stéphane Moriaux avec/with iMac-intel
Avatar
HD
Ça aurait été sympa de ne pas faire ouvrir une nouvelle fenêtre !


Je préférerais faire une redirection sur ma page principale... je vais faire
la modif.

tu n'as absolument pas à avoir à indiquer les tailles si ce sont des
images qui sont à afficher


Effectivement c'est super !!! ça permet de modifier l'opacité des images (et
donc leur contraste).

J'ai également testé en ajouter un
background-color:#8000c0;
sur le div.on et j'ai maintenant un rectangle à la couleur voulue qui
apparaît au survol du département.

N'y aurait pas une option permettant de modifier la couleur de l'image en
elle même ?

En tout cas, un grand MERCI pour votre aide.
--
@+
HD
Avatar
SAM
Le 26/07/11 16:56, HD a écrit :

N'y aurait pas une option permettant de modifier la couleur de l'image en
elle même ?



Pas que je sache.

Peut-être en html.5 ?

mais si on peut faire des trucs avec canvas
qu'en est-il de IE ?

Ha! si ça tombe IE sait déjà modifier des couleurs d'images ?
avec ces css filter ou le truc là qui calcule en css

En tout cas, un grand MERCI pour votre aide.




CSS :
==== div { position:absolute; }
div span { position: absolute; display: block;
width: 100%; height: 100%;
background: red;
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
-webkit-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacityP);
visibility: hidden;
}
div.on span { visibility: visible }
div.on { background: green; }

JS : inchangé
===
html :
=====
<div id="d60" style="left:192px;top:61px;wdth:39px;height:29px"><img
src="dp/dp60.gif" alt="60"
onclick="top.location='http://www.monssite.fr/';"><span></span></div>


--
Stéphane Moriaux avec/with iMac-intel
Avatar
SAM
Le 26/07/11 17:17, SAM a écrit :

<div id="d60" style="left:192px;top:61px;wdth:39px;height:29px"><img
src="dp/dp60.gif" alt="60"
onclick="top.location='http://www.monssite.fr/';"><span></span></div>



probable que ce sera mieux avec :

div { cursor: pointer; _cursor: hand; ... etc ...

et :

<div id="d60" style="left:192px;top:61px;wdth:39px;height:29px"><img
src="dp/dp60.gif" alt="60"><span
onclick="top.location='http://www.monssite.fr/';"></span></div>

--
Stéphane Moriaux avec/with iMac-intel
Avatar
Pierre Goiffon
On 26/07/2011 14:56, HD wrote:
Pourriez vous être plus précis sur votre besoin ?
Ce que vous décrivez me fait penser à une image map, mais en parlant de
onmouseover je suppose que vous voulez mettre en place du rollover ?



J'ai un ensemble d'image GIF correspondant aux départements français. Via le
CSS je positionne ces départements en absolue afin que la représentation
globale puisse me montrer la France. Tout ceci est dans une frame. Je
voudrais qu'en cliquant sur l'un des départements que l'on soit redirigé
vers le site correspondant aux bureaux locaux.

Pour le onmouseover, je voudrais pouvoir faire un effet zoom ou recolorisé
de l'image du département... par contre, les images de chacun des
départements n'ont pas la même taille... ce sont des images récupérées d'un
ancien travail (pour gagner du temps).



Alors oui, c'est exactement ça !
Il faut que vous cherchiez avec les mots clés image map et rollover.

En allant vite je suis tombé là-dessus par exemple (pas regardé le code) :
http://ago.tanfa.co.uk/css/examples/europe-map.html#

Attention par contre à la solution que vous adoptez, on trouve beaucoup
de choses en ligne mais pas toujours très judicieux !
1 2