Incorporer une image "cliquable" avec du CSS

Incorporer une image "cliquable" avec du CSS - Web design - Graphisme

Marsh Posté le 13-08-2012 à 23:15:02    

Bonjour à tous, voici mon premier message en ces lieux...
 
J'espère en apprendre auprès de vous parce que dans mon coin je trépigne... En d'autres termes, soyez indulgents, c'est pas l'envie qui me manque.
 
Mon problème du jour - car oui j'ai un problème - concerne la création d'une entête "interactive" pour un forum de type RPG.  
 
Ne sachant manipuler sans désastre quelques tableaux html (oui j'ai honte), je me suis rabattue sur l'option image cliquable qui était une alternative intéressante pour qui est plus exigeant en rendu graphique qu'en rendu "pratique"... Toujours est-il que ce temps est révolu et qu'à présent j'aimerais mêler ma très très légère maîtrise des <div> à mon image "cliquable".  
 
Clairement, je n'arrive pas à intégrer:

Code :
  1. <img src="adresse de mon image merveilleuse" width="1000" height="550" border="0" usemap="#map" />
  2. <map name="map">
  3. <area shape="rect" coords="34,150,175,317" href="http://osh-le-secret.xooit.com/t55-Nous-lier.htm" />
  4. </map>


 
dans:
 

Code :
  1. <div class="global" style="width: 100%; color:black; background-color: white; background-image:url(adresse image); border-radius : 20px; border : 2px solid black; padding : 8px; width : 984px; height : 534px">


 
Est-ce... imaginable ou est-ce que... j'ai trop d'imagination? Merci beaucoup de votre attention et commentaires ^^

Reply

Marsh Posté le 13-08-2012 à 23:15:02   

Reply

Marsh Posté le 14-08-2012 à 00:07:29    

Hi,
 
Qu'est-ce que tu veux faire en fait ? j'comprends pas trop à vrai dire.

Reply

Marsh Posté le 14-08-2012 à 00:10:54    

Ah oui c'est très probable...
Alors avec des termes plus claires... je veux mon image cliquables (car je ne sais m'en débarrasser encore pour tout ce que je veux faire graphiquement) mais incorporer dessus des zones (boites flottantes?) de texte html ou petit bouton en html.
 
merci beaucoup de te pencher sur ma question.

Reply

Marsh Posté le 14-08-2012 à 00:29:58    

Oué je vois, ben en fait ça existe des générateurs pour ce que tu veux faire. Genre http://www.image-maps.com (je sais pas ce que ça vaut j'ai pris au pif) tu cherches avec images maps
 
Après il y a peut être d'autres solutions et peut-être plus propre mais faudrait plutôt demander ici http://forum.hardware.fr/hfr/Progr [...] ujet-1.htm

Reply

Marsh Posté le 14-08-2012 à 00:35:45    

Les images map, j'ai trouvé comment faire oui, mais c'est incorporer des zones, area, html pour texte ou autre, ces générateurs font ça également? Pas besoin de bidouiller avec des Div variées?

Reply

Marsh Posté le 14-08-2012 à 00:41:20    

Oh d'accord, mille excuses si je n'ai investi les bons lieux. Merci en tout cas!

Reply

Marsh Posté le 14-08-2012 à 08:19:11    

PhotoShop fais pas ça? Imageready le faisait on pouvait rajouter du texte à là zone


---------------
Genghis achat/vente
Reply

Marsh Posté le 14-08-2012 à 15:19:21    

Je vais explorer cela mais non seulement du texte, je veux pouvoir intégrer des balises html pour des boutons ou autres informations. Merci beaucoup! J'ai posté ma demande du côté "CSS" et j'ai une autre alternative également.. y a plus qu'à...  
 
>> http://forum.hardware.fr/hfr/Progr [...] m#t2153222

Reply

Marsh Posté le 15-08-2012 à 22:55:14    


<style>
   div#container{
      position : relative;
   }

 

  div#container a#first{
      position : absolute;
      top : 50px;
      left : 50px;
   }
</style>

 

<div id="#container">
   <img src="tasource.jpg" />
   <a href="tonlien.html" id="first"><img src="srcdetonbouton.jpg" /></a>
</div>

 

ça, ça va te permettre de placer ton lien (que ce soit du texte ou une image) n'importe où par dessus ton image. C'est ça que tu voulais ?


Message édité par wizopunker le 15-08-2012 à 22:55:33

---------------
| .:: www.wizopunk-art.com - Développement web ::. |
Reply

Marsh Posté le 15-08-2012 à 23:22:22    

Merci beaucoup! Je ne sais pas.. je vais faire des tests pour essayer ça.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed