Ajout d'un bouton zoom valable pour tous les éléments de la page

Question

baldeck

31 May 2014 à 18:13

Bonjour,

Je souhaiterais insérer un curseur ou bouton zoom avant/arrière (et même, si ça n'est pas un trop grand luxe, un déplacement par clic maintenu) comme sur Google map, Mappy... qui soit valable pour tous les éléments de ma page (textes, images, gif...).
L'équivalent du "ctrl+" et "ctrl-" mais intégré à mes pages et dont je puisse décider de la capacité de zoom avant/arrière.
Etant toute débutante, je ne sais pas si un code html suffit ou s'il faut faire appel à javascript ou pire encore...

Merci d'avance pour toute piste

(Merci pour ce site très utile et très bien rangé)

claire

Zelalsan

1 Jun 2014 à 22:32

salut,
le vrai problème serait de connaître l'utilité d'une chose pareille ? Tous les navigateurs gèrent le zoom / dézoom des pages, je ne vois donc pas pourquoi tu voudrais réinventer la roue.
Tu pourrais par ailleurs passer par un "scale" (ou "zoom" pour IE) et je ne vois pas comment faire sans JS.

baldeck

2 Jun 2014 à 23:38

Bonjour et merci pour ta réponse Zelalsan,

J'aimerais insérer un zoom/dézoom pour inciter à changer d'échelle et emprunter aux codes de la carte pour les appliquer à une page comprenant des dessins, typographies, gifs animés, sons...que le visiteur puisse explorer un peu comme on se perd dans des ruelles encombrées.

Le code javascript suivant se promenait sur un forum:

<a href="javascript:void(0)" onclick="enlargex()" id="zoomtab">+ Enlarge</a>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function enlargex(){
if ($('body').css('transform') == 'scale(1.2)') {
$('body').css('transform','scale(1)');
$('body').css('-webkit-transform','scale(1)');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(1)');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(1)');
$('body').css('-o-transform-origin','0 0');
$('body').css('-ms-transform','scale(1)');
$('body').css('-ms-transform-origin','0 0');
$('#zoomtab').html('+ Enlarge');
} else {
$('body').css('transform','scale(1.2)');
$('body').css('-webkit-transform','scale(1.2)');
$('body').css('-webkit-transform-origin','0 0');
$('body').css('-moz-transform','scale(1.2)');
$('body').css('-moz-transform-origin','0 0');
$('body').css('-o-transform','scale(1.2)');
$('body').css('-o-transform-origin','0 0');
$('body').css('-ms-transform','scale(1.2)');
$('body').css('-ms-transform-origin','0 0');
$('#zoomtab').html('- Shrink');
}
}
</script>

il est efficace mais ne permet que deux échelles...est-il possible d'en ajouter?

Zelalsan

4 Jun 2014 à 08:38

Je suppose qu'on peut faire à peu près ce qu'on veut. Je me suis amusé à faire un truc simple avec du texte. Il faudrait cependant l'arranger pour le faire correspondre avec la propriété "zoom" de IE mais je crois qu'il y a déjà le socle de ce qui est recherché (à moins d'être passé à côté...). On peut zommer / dézoomer au scroll ce qui est, je pense, pratique dans la plupart des cas. On pourrait mettre n'importe quoi dans la <div>, ça ne changera rien.

baldeck

4 Jun 2014 à 12:48

Ça m'a l'air parfait mais je n'ai pas dû l'insérer correctement parce que le zoom + fonctionne avec les deux boutons, je n'arrive pas à faire marche arrière. Et le scroll non plus ne veut pas m'obéir...

j'ai inséré le javascript dans la <head> et rempli le div de tous mes éléments comme suit :

<!DOCTYPE html>
<html>
<head>
   <meta charset= "utf-8" />
   <link rel="stylesheet" href="style.css" />
   
  <title> terre ceinte </title>
     

<!--javascript sound on picture when mouseover-->
	 
<script type="text/javascript">
 
function playpause(){
 
var lui=document.getElementById('v1')
 
if(lui.paused==true){
lui.play()
}
else{
lui.pause()
lui.currentTime=0
}

</script>


<!--javascript zoom in/out button-->

<script type="text/javascript">

function addEvent(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent('on'+b,c);}

function changeZoom(zoom, e){
	
	currentZoom += coefficient * (e.detail < 0 || e.wheelDelta > 0 || zoom > 0 ? 1 : -1);
	
	currentZoom < 0 && (currentZoom = 0);
	
	transform && (zoomArea.style[transform] = "scale("+ (currentZoom) +")");
	
	("zoom" in document.body.style && !transform) && (zoomArea.style.zoom = currentZoom);
	
}

var zoomArea = document.querySelector("div"),
	currentZoom = 1,
	coefficient = 1,
	transform;

if ("transform" in document.body.style) {
	transform = "transform";
}else {
	for (var p in document.body.style) {
		if (/^((Moz|(?:w|W)ebkit|ms|o)Transform)/.exec(p)) {
			transform = RegExp.$1;
			break;
		}
	}
}

addEvent(document, "DOMMouseScroll", function(e){changeZoom(null, e)});
addEvent(document, "mousewheel", function(e){changeZoom(null, e)});
addEvent(document.getElementById("plus"), "click", function(e){changeZoom(1, e)});
addEvent(document.getElementById("moins"), "click", function(e){changeZoom(-1, e)});
   
</script> 

 
</head>

<body>

 <div>

<a href="akko.html">
<p class="akko"> AKKO </p>
<a href="haifa.html">
<p class="haifa"> HAIFA </p> 
<a href="naplouse.html">
<p class="naplouse"> NAPLOUSE </p>
<a href="telaviv.html">
<p class="telaviv"> TEL AVIV  </p>
<a href="jericho.html"> 
<p class="jericho"> JERICHO </p> 
<a href="lifta.html">
<p class="lifta"> LIFTA </p> 
<a href="jerusalemouest.html">
<p class="ouest"> OUEST JERUSALEM</p>
<a href="jerusalemest.html">
<p class="est"> EST JERUSALEM </p>
<a href="bethleem.html">
<p class="bethleem"> BETHLEEM</p>
<p class="eingedi"> EIN GEDI </p>
	 
	   
<img src="images/peplum.gif" name="solomon and the queen of saba" id="peplum">   
<img src="images/west.png" name="west" id="wj">
<img src="images/east.png" name="east" id="ej">
<img src="images/liftacactus.png" name="lifta" id="liftacactus">
<img src="images/akkofish.png" name="akkofish" id="akkofish">
<img src="images/olivetree.png" name="olivetree" id="olivetree"> 
<img src="images/shabatbaboker.gif" name="shabat ba boker" id="arik">


<div>
<audio id="v1" autobuffer="true">
<source src="audio/haifasubway.mp3" type="audio/mp3">
<source src="audio/haifasubway.ogg" type="audio/ogg">
</audio>
</div>
 
<div> <img src="images/metro.png" alt="metro" id="metro" onmouseover="playpause()" onmouseout="pause()"></div>
	
</div>
<span id="plus">+</span><span id="moins">-</span>

et le code css tel quel:

head




body

{
       background-color: white;
	   width: 100%;
	   height: 300%;
}	   


html, body {overflow:hidden;height:100%;margin:0;}
body {display:table;width:100%;text-align:center;}
div {display:table-cell;vertical-align:middle;font:700 1em sans-serif;transition:transform .4s ease;}
span {position:fixed;width:50%;bottom:0;left:0;font:700 1.2em/45px sans-serif;color:#fff;background:#333;cursor:pointer;transition:all .3s ease;}
span+span {left:auto;right:0;border-left:1px solid #fff;}
span:hover {background:#545454;}


p
{      
       display: block;
	   vertical-align: top;
	   width: 55%;
	   background-color: none; 
       font-family: FV Almelo, Arial,Trebuchet MS, sans-serif;
	   src: url ('fv_almelo-webfont.woff');
	   font-size: 1em;
	   font-weight: bold;
       line-height: 1em;
       text-align: left;
       text-decoration: none;
       padding: 1px;
	   color: black;
}

.akko
{     
       display: block;
       position: fixed;
	   border: 0;
	   background: none;
	   width:50% ;
	   text-align: left;
       margin-left: 2%;
	   margin-top: -0.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.akko:hover
{
       color: red;
}
	   
.haifa
{     
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
       text-align: left;
	   margin-left: 2%;
	   margin-top: 4.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.haifa:hover
{
       color: red;
}

.naplouse
{     
       display: block;
	   position: fixed ;
	   border: 0;
	   vertical-align: top;
	   background: none;
	   width: 50%;
       text-align: left;
	   margin-left: 2%;
	   margin-top: 9.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.naplouse:hover
{
       color: red;
}

.telaviv
{     
       display: block;
       position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
	   text-align: left;
	   margin-left: 2%;
	   margin-top: 14.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.telaviv:hover
{
       color: red;
}

.jericho
{     
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
	   text-align: left;
	   margin-left: 2%;
	   margin-top: 19.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.jericho:hover
{
       color: red;
}

.lifta
{     
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
	   text-align: left;
	   margin-left: 2%;
	   margin-top: 24.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.lifta:hover
{
       color: red;
}

.est
{     
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 60%;
	   text-align: left;
	   margin-left: 2%;
	   margin-top: 29.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.est:hover
{
       color: red;
}

.jerusalem
{     
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
	   text-align: left;
	   margin-left: 15%;
	   margin-top: 33%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.jerusalem:hover
{
       color: red;
}

.ouest
{     
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
	   text-align: left;
	   margin-left: 2%;
	   margin-top: 34.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.ouest:hover
{
       color: red;
}

.bethleem
{     
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
	   text-align: left;
	   margin-left: 2%;
	   margin-top: 39.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.bethleem:hover
{
       color: red;
}

.eingedi
{ 
       display: block;
	   position: fixed;
	   border: 0;
	   background: none;
	   width: 50%;
	   text-align: left;
	   margin-left: 2%;
	   margin-top: 44.5%;
       font-size: 55em;
       font-family: FV Almelo, Arial, Trebuchet MS, sans-serif;
	   color: blue;
	   padding: 0%;
}

.eingedi:hover
{
       color: red;
}


<!--PICTURES-->
	      

#ej
{
       display: block;
	   margin-left: 13%;
	   margin-top: -17%;
	   height: 100px;
	   weight:0%;
 }


#east
{
       display: block;
	   margin-left:80%;
	   margin-top:-30%;
	   height: 400px;
	   weight:0%;
 }

#wj
{
       display: block;
	   margin-left: 1%;
	   margin-top:-17%;
	   height: 125px;
	   weight:0%;
 }


 #west
{
       display: block;
	   margin-left:3%;
	   margin-top:0%;
	   height: 800px;
	   weight:0%;
 }	   

#liftacactus
{ 
       display: block;
	   margin-left:60%;
	   margin-top:0%;
	   height:60px;
	   weight: 0px;
}

#akkofish
{ 
       display: block;
	   margin-left:20%;
	   margin-top:0%;
	   height:0px;
	   weight: 1000px;
}

#metro
{
       display: block;
	   margin-left: 120%;
	   margin-top: -43.5%;
	   height: 150px;
	   weight: px;
}

#olivetree
{
       display: block;
	   margin-left: 45%;
	   margin-top: 53%;
	   height: 170px;
	   weight: px;
}

#peplum
{
       display: block;
	   margin-left: 38%;
	   margin-top: 3%;
	   height: 100px;
	   weight: px;
}

#arik
{
       display: block;
	   margin-left: 55%;
	   margin-top: 10%;
	   height: 250px;
	   weight: px;
}

J'ai essayé avec le seul texte d'essai, ça ne fonctionne pas plus...
(je travaille avec Firefox)
Sans doute ai-je manqué quelque chose de très évident...
(il y a peut-être aussi un problème de zones cliquables superposées au niveau des boutons dû à ma mise en page)

Un grand grand merci en tous les cas!

Sujet clos

Questions générales et questions de débutants

Ajout d'un bouton zoom valable pour tous les éléments de la page