background preloader

Tutoriel créer une carte personnalisée avec google maps

Customiser Google Map : afficher un plan personnalisé par devblog.fr Lorsqu’on veut afficher un plan, il est parfois compliqué de trouver la bonne requête Google pour afficher une carte précise. De plus, si le lieu n’est pas répertorié par Google, l’info-bulle sera assez pauvre. Voyons comment obtenir exactement le plan que l’on souhaite, grâce à l’API Google Maps version 3. Il suffit de connaître les coordonnées GPS du point à afficher*. Vous pouvez voir la démo ici : carte google map personnalisée. 1 – Charger l’API Dans le head de votre script, appelez le script suivant : 2 – Notre script A la suite de votre script, incluez un script js, par exemple carte.js. Dans ce script nous créeons une fonction affichePlan(). 3 – Affichage Nous n’avons plus qu’à appeler la fonction affichePlan() au chargement de la page (exemple utilisant JQuery) : On peut bien-entendu remplacer les valeurs en dur par des données issues d’une base de données, qu’on récupère en php ! *Il s’agit des coordonnées GPS en format décimal.

22 beautiful free image galleries for your website I'm sorry folks, I don't know why this is. The number "22" has hit me and I don't know why. After my articles with top 22 CSS tutorials, 22 steps you must do after setting up a blog and my previous article about the top 22 photoshop tutorials, I now give you a nice collection of 22 beautiful image galleries for your website. This is a list with 15 JavaScript galleries and 7 Flash-based galleries. Best of all, these galleries are all completely free. Grab one and use it wisely for your website and your visitors will be stunned. This article is seperated in to two different kinds of galleries. 15 JavaScript Galleries Highslide JS - vikjavev.no Highslide JS is an open source JavaScript software, offering a Web 2.0 approach to popup windows. SmoothGallery - jondesign.net Using mootools v1.11, this javascript gallery and slideshow system allows you to have simple and smooth (cross-fading...) image galleries, slideshows, showcases and other cool stuff on your website. Slideshow - electricprism.com

Tutoriel jQuery UI jQuery UI est une surcouche de jQuery qui propose des outils pour créer des interfaces graphiques interactives. Ses fonctionnalités se divisent en 3 catégories : Interactions Elles permettent de donner des propriétés très intéressantes à des éléments HTML, comme le fait de pouvoir être attrapé et déplacé avec la souris (drag & drop), d'être redimensionné comme une fenêtre, ou encore d'être sélectionné comme des icônes sur le bureau de votre OS.Widgets Les widgets sont des objets "clé en main " qui proposent des fonctionnalités de haut niveau comme le DatePicker par exemple, qui affiche un calendrier permettant de sélectionner une date. Effects Ils enrichissement les effets par défaut proposés par jQuery que l'on a vus dans les chapitres précédents (fadeIn, slideUp...). Pour utiliser jQuery UI, il faut bien entendu avoir inclus jQuery dans votre page web avec la balise <script> , mais il faut aussi ajouter le fichier .js de jQuery UI ainsi qu'une feuille de style. Exemple 1 Exemple 2 Drag

jQuery Image Magnify Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4). Only .js file changed. Description: jQuery Image Magnify enables any image on the page to be magnified by a desired factor when clicked on, via a sleek zoom in/out effect. The enlarged image is centered on the user's screen until dismissed. It works on both images with and without explicit width/height attributes defined. This script is extremely easy to set up- to enable the "magnify" effect on any image, just give it a CSS class of "magnify". Demos Magnify by 3x, duration=0.5 second: Magnify by 3.5x, duration=0.5 second: Reapplying magnification to image after each image change: Directions Simply add the below code inside the <HEAD> section of the page: The above code references two external files which you should download below (right click, and select "Save As"): Step 2: Then, to apply enable the magnify effect on an image just insert a CSS class of "magnify" inside it, for example: or

Ergonomie web illustrée Création d'images cliquables, HTML Map Creator La création d’images cliquables avec différentes zones sensibles n’est pas spécialement facile à réaliser par des personnes ne connaissant pas la beauté du langage HTML. Pour leur faciliter la vie, le service en ligne HTML Map Creator permet à partir d’une image d’y ajouter des zones cliquables renvoyant vers les pages Web de son choix. Il s’agit de liens présents sur l’image qui réagissent au clic de souris des visteurs. Ces images sont reconnues par tous les navigateurs Web. L’opération se fait en trois étapes : L’opération est simple et conviendra à toutes les personnes cherchant une façon rapide de créer sans programmation une image cliquable. Source : HTML Map Creator

Troc de Voiture Design and Web Development Magazine, be Inspired and Creative How to Work as A Freelance Designer and Travel Life as a freelance designer is not always as glamorous as it may sound. There is often work to be done … even when you have travel plans. Sometimes you have freelancing to do while traveling for work (another job or other freelance jobs), but sometimes you have freelance jobs to finish when traveling for pleasure as well. CSS3 Hover Link Effects One of the essential parts of a website is a text link. Best Website Examples that Use Startup Design Framework This article is a case study in websites built using Startup Design Framework. The What, Why, and How of Mockups Before we get into how to make the most of your mockups, it helps to know what exactly they are — and what they’re not. How to Create a Moto 360 Smart Watch in Adobe Illustrator If you’re into smartwatches, now this is the tutorial for you. Introducing New Qards: More Features, Better & Faster How to Choose the Right Monitor for Web Design Designing a Great Photography Website

jquery-frontier-calendar - Full month calendar jQuery plugin that looks like Google Calendar. Full month calendar jQuery plugin that looks like Google Calendar. Latest Version, 1.3.2- June 24th, 2010 Please visit the downloads section for a working example and API documentation. Download Latest Version: Download Older Versions: Google Group: Shameless mention of my other vertical tab plugin Change Log Screenshots All UI elements such as next-month & previous-month buttons, add event form, edit event form, tooltips, etc, are not part of the calendar plugin. When there are too many agenda items to fit within a day cell a "more" link appears. You may change the background image via the CSS file.

Mail de confirmation en PHP Face à un phénomène grandissant qui est celui des inscriptions automatiques et autres multi-comptes, un des systèmes les plus efficaces reste à ce jour la confirmation par mail. Vous savez, c'est le genre de message que l'on reçoit pour activer notre compte après une inscription sur un forum, site, jeu... Pour lutter contre se fléau, nous allons créer un petit module qui enverra automatiquement un mail lors de la validation du formulaire d'inscription. Ce mail contiendra alors la procédure à suivre (un lien internet) pour finaliser l'inscription du nouveau compte. Cet article part sur le principe que vous possédez une Base de Données (BDD) et que vous maîtrisez sa gestion. Dans cet article, PDO sera le système pour gérer les relations avec la base de données. Cet article s'adresse principalement aux Webmasters désireux de limiter les inscriptions factices et par conséquent diminuer le temps perdu à la maintenance et à la vérification de validité des données... Réception du mail... I. <? II.

Related: