Image cliquable avec effet

Version imprimable

04/06/2013, 15h03
Tendhor57

Image cliquable avec effet
Bonjour,

Actuellement j'ai réussi à faire une imae cliquable en prenant se petit bout de code là:
Code:

1 2 3 4 <img usemap="#mamap" src="URLdel'image" alt="Texte alternatif" /> <map name="mamap"> <area shape="rect" coords="0,0,50,50" title="blabla" nohref="nohref"> </map>
Hors je cherche à donner des effets à cette zone cliquable, je souhaiterais en effet que au clic sur mon area une nouvelle image vienne se superposé.

Après plusieurs recherche sur internet et plusieurs test, je n'ai pas trouvé comment faire cela.

La seul chose que j'ai trouvé, c'est que apparament cela est faisable en JQuery d'ou mon poste et de plus le seul tuto trouvé à ce sujet est payant :( et j'ai pas de sous :oops:

Donc si quelqu'un peut m'aider se serais sympa
04/06/2013, 15h11
Tendhor57

Après une nouvelle recherche non pas sur les effets images, mais sur superposé une image sur mon area, j'ai trouvé ceci:

http://www.developpez.net/forums/d96...rea-au-survol/

Ca ne répond pas exactement à ma demande mais cela s'en approche, mais si il y a d'autre suggestion je suis preneur
04/06/2013, 15h11
Bovino

Regarde du côté de : Image map et changement de couleur de l'area au survol.
04/06/2013, 15h29
Tendhor57

Merci Bovino, je vais y potasser cette semaine et ce weekend, car ton lien semble identique au mien :lol:.

Je vais donc quand même tenté de suivre ce lien et de modifier par la suite en fonction de mes besoins celui-ci.

Je n'hésiterais pas à revenir ici pour faire part de mon avancement.
05/06/2013, 13h35
Tendhor57

Voilà, comme promis je revient vers vous.
Après quelque test cela marche très bien, je vais pouvoir mettre ce sujet à résolu bientôt :), mais juste avant de faire cela j'ai un dernière question qui me tracasse alors voilà je la pose, histoire d'avoir enlevé tout mes doutes.

http://www.developpez.net/forums/d96...rea-au-survol/

En suivant ce topic, j'ai vu que pour faire apparaitre ces forme varié coloré au passage de la souris, il à fait ainsi:

- pirs une image de fond de 100*100
- fais un transparant de 100*100
- fais des images qui représentents ses formes colorés et placés celles-ci à l'intérieur d'un fond transparent de 100*100

D'ou ma question, si je souhaite partir sur une image de 1200px par 800px par exemple, que je souhaite y mettre des zones cliquable en forme de carré de 40px par 40px et que l'ensemble de ces carrées recouvrirons au final toutes mon images.

Je serais donc bien obliger de créer (1200/40)*(800/40)=600 peits carrés ? C'est bien ça ? Ou je mis prend mal ?

En faite, je reviens vers vous car j'ai réussi à récupérer une partis de code (venant d'un jeu web) de ce que je souhaiterais faire, celui-ci n'utilisant pas les images cliquable, d'ailleurs en voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden; margin: 0px; padding: 0px; height: 100%; width: 100%;">
<head>
<body style="overflow: hidden; margin: 0px; padding: 0px; height: 100%; width: 100%;">
<div style="height: 10000px; width: 10000px; top: -100000px; left: -100000px; visibility: hidden; position: absolute; overflow: visible;">
<div id="fb-root" class=" fb_reset">
<script src="http://eaassets-a.akamaihd.net/lougame/cdn/400184/script/soundmanager2-nodebug-jsmin.js" type="text/javascript">
<script src="Presentation/Service.svc/ajaxEndpoint/loadingData/84a493e4-a64d-4203-a30c-2c9c7d7bb942" type="text/javascript">
<script type="text/javascript">
<script src="http://eaassets-a.akamaihd.net/lougame/cdn/400184/script/loader.js" type="text/javascript">
<script type="text/javascript">
<script src="http://vex.wildtangent.com/Vex/v1/bb.js?pn=ea&sn=lordofultima_v1&gn=lordofultima&prmi=fortuneteller&c=en-us&ord=2661099631213802.5" type="text/javascript">
<div id="newsletterBanner" style="display:none;"> </div>
<div tabindex="1" style="position: absolute; outline: medium none; background-color: rgb(41, 42, 37); left: 0px; top: 0px; width: 1680px; height: 610px;">
<div qxselectable="off" dir="ltr" style="overflow: hidden; position: absolute; z-index: 10; -moz-user-select: -moz-none; left: 0px; top: 0px; width: 1680px; height: 610px;">
<div style="z-index: 0; position: absolute; cursor: default; left: 0px; top: 0px; width: 1680px; height: 610px;">
<div qxselectable="off" dir="ltr" style="overflow: hidden; position: absolute; z-index: 10; -moz-user-select: -moz-none; left: 0px; top: 0px; width: 1680px; height: 610px;">
<div style="z-index: 0; position: absolute; cursor: default; left: 0px; top: 0px; width: 1680px; height: 610px;">
[..]

En faite ce que je souhaitais faire c'est un jeu web avec une carte cliquable, et c'est à cette instant que j'ai pensé à une image cliquable.

Cette solution n'étant pas celle-utilisé par le jeu déjà existant en question.

Donc j'aimerais un avis des développeurs à savoir si le code ci-dessus est une bonne inspiration ou non pour développer une telle carte ?