Le pingouin des @lpes

Mots clés : javascript

Rafraîchir une « iframe »

Patrice Blondel Webmaster iframe, javascript Aucun commentaire


Il est parfois utile de rafraîchir une <iframe> dans une page web.
Cela permet par exemple de recentrer une « Google Maps » après avoir affiché une infobulle.
Dans l'exemple, je vais placer un bouton juste au dessus de l'<iframe> pour la recharger.

Comment faire ?

Créer le bouton

Une classe reload_iframe est déclarée pour le css
<div class="reload_iframe"><input type="button" id="btn" value="Rafraîchir" /></div>

Le script

<script>
	function reload() {
	    document.getElementById('iframeid').src += '';
	} btn.onclick = reload;
</script>

Le css

À adapter selon votre site.
	#btn {
		border-radius:0.5em 0.5em 0 0;
		border: 2px solid #ccc;
		font-size: .9em;
		padding: .4em;
		background: transparent;
	}
	.reload_iframe {
		text-align:center;
		margin-bottom: -2px;
	}
Il suffit maintenant d'intégrer l'iframe à la page web sous la forme :
 <iframe id="iframeid" src="url_iframe"></iframe>

Exemple

Responsive StreetView

Patrice Blondel Webmaster javascript, streetview, google Aucun commentaire


Une Street View qui s'adapte à tous les écrans

Explications

Création d'une classe streetview pour renseigner le css

Le css


Affichage de la StreetView

<div class="streetview">
 <iframe src="url_streetview" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Insérer facilement une carte Google Maps

Patrice Blondel Webmaster google, javascript Aucun commentaire


Google Maps permet l'intégration d'une carte personnalisée sur son propre site web.
Il faut pour cela utiliser un code html fourni par l'application de cartographie de Google.
Après avoir fait une recherche sur Google Maps, vous pouvez obtenir le code HTML qui permet l'affichage de la carte.
Dans la fenêtre de gauche, choisissez Partager -> Intégrer la carte pour récupérer le code.
Vous pouvez personnaliser la taille de la carte.


un plan de Beauvais

Une autre solution est de se rendre sur le site : https://maps-generator.com/fr.
Pour utiliser ce générateur de carte, vous aurez besoin d'une clé Google Maps API (gratuite).
Suivez ces indications pour l'obtenir.
Maintenant, vous pouvez placer un marqueur et personnaliser votre carte.

Exemple

google maps html widget

Ma maison

Des images réactives

Patrice Blondel Webmaster pluxml, javascript Aucun commentaire



Cliquez sur le visage pour ouvrir une autre image, puis sur la miniature du groupe pour retrouver l'original.

Comment faire ?

J'ai tout d'abord créé trois images de même taille (600x400), elles sont retouchées ou composées avec Gimp.

Le javascript

Dans pluxml, il est à insérer à la fin de l'article.


<script type="text/javascript">
function replaceImage(imgid, source, mapid)
{
	var image = document.getElementById(imgid);
        image.src= source;
	var newmap = document.getElementById(mapid);
	var origin = document.getElementById("mapgeneric");
	origin.innerHTML = newmap.innerHTML;	
}
</script> 

Le code

<div>
<!-- initialisation de la map générique avec sandrine et paul -->

<map name="mapgeneric" id="mapgeneric">
<area href="javascript:replaceImage('img1', 'medias/paul.jpg', 'mappaul')" 
title= "Paul Richard" alt="" shape="rect" coords="45,74,155,210"></area>
<area href="javascript:replaceImage('img1', 'medias/sandrine.jpg', 'mapsandrine')" 
title= "Sandrine Piéton" alt="" shape="rect" coords="300,68,395,168"></area>
</map>

<!-- La map du club info -->

<map name="mapclubinfo" id="mapclubinfo">
<area href="javascript:replaceImage('img1', 'medias/paul.jpg', 'mappaul')" 
title= "Paul Richard" alt="" shape="rect" coords="45,74,155,210"></area>
<area href="javascript:replaceImage('img1', 'medias/sandrine.jpg', 'mapsandrine')" 
title= "Sandrine Piéton" alt="" shape="rect" coords="300,68,395,168"></area>
</map>

<!-- la map de paul -->
  
<map name="mappaul" id="mappaul">
<area href="javascript:replaceImage('img1', 'medias/clubinfo.jpg', 'mapclubinfo')" 
alt="" shape="rect" coords="489,317,578,377"></area>
</map>
<!-- la map de sandrine -->
  
<map name="mapsandrine" id="mapsandrine">
<area href="javascript:replaceImage('img1', 'medias/clubinfo.jpg', 'mapclubinfo')" 
alt="" shape="rect" coords="489,317,578,377"></area>
</map>

</div>
<!-- affichage de l'image de départ -->
<img id="img1" src="medias/clubinfo.jpg"  usemap="#mapgeneric" alt="" />

Explications

Une image réactive est définie par les balises <map> et </map>.
La balise <area> permet de définir chaque région.
Les zones « cliquables » peuvent être un rectangle (attribut shape=rect), un cercle (attribut shape=circle) ou un polygone (attribut shape=poly).
coords : définit une liste de coordonnées séparées par une virgule de la région.
href : définit l'URL de la ressource internet à laquelle la région est liée.