WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
HTML5 / Canvas

HTML5 canvas Image Mapper

— Add- On om WorldWideScripts.net

Abonneer u op onze feed om de hoogte te blijven!

Nieuw! Volg ons als u het wilt!


HTML5 canvas Image Mapper - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

Dit is een beeld html mapping ontworpen voor webontwikkelaars.

De tool is ontwikkeld met behulp van de HTML5 canvas, zodat het gebruik ervan is beperkt tot de browsers die het doek te ondersteunen, maar ook de File API's:

IE10 +, FF3.6 +, FF14-, FF18 + (de FF15 hebben problemen met sommige doek functionaliteiten, Bug 787.623, dat in FF18 zal worden opgelost), Chrome6 +, Safari6 +, Opera11.1 +

Aangezien dit is een tool voor ontwikkelaars, ik denk dat dit niet een grote beperking, omdat ik denk dat een web ontwikkelaar heeft geen probleem om een ​​passende browser te kiezen.

Ik heb gebruikt FF14 om de tool te ontwikkelen, dus dit is de beste keuze, maar de functie is ook getest in Chrome22 en Opera12


Opmerking: De versie van de tool die je kunt zien in de Live Preview koppeling, is een beperkte versie van de tool. Met deze versie kunt u alleen laden een specifieke set van beelden, vermeld op de homepage. Na het laden van een afbeelding die u kunt tekenen alle vormen, maar alleen de eerste 6 vormen zal worden gegenereerd in de HTML-code. Deze beperking geldt niet voorkomen dat u alle functies van het gereedschap te testen.


Wat is een beeld kaart?

Een image map is een HTML-code die de gebruiker klikbare verschillende delen van een beeld maakt. De HTML-code bestaat uit de map HTML-tag, in samenwerking met het gebied tag, die u toelaat om gebieden te definiëren met rechthoekige, veelhoekige en ronde vormen.
Als voorbeeld, als je beeld image1.png in uw HTML-pagina, kunt u de volgende code te schrijven:

 <img src="image1.png" width="145" height="126" alt="map example" usemap="#image1map" /> <map name="image1map"> <area shape="rect" coords="0,0,82,126" href="area1.html" alt="area1"> <area shape="poly" coords="108, 145, 174, 71, 205, 139, 153, 192" href="area2.html" alt="area2"> <area shape="circle" coords="124,58,8" href="area3.html" alt="area3"> <area shape="default" href="http://default.html" alt = "the whole image"/> </map> 

Zoals u kunt zien, moet je de usemap attribuut in de img tag, die dezelfde waarde van de naam attribuut in de kaart tag zal hebben ingesteld. Tussen de <map> en </ map> kunt u zoveel <gebied> -tags een ieder die een gebruiker-klikbare gebied op de bijbehorende afbeelding definiëren als je wilt. Rect, poly en cirkel: elke ruimte vorm kenmerk, dat een van de 3 waarden hebben. De rect vorm wordt volledig bepaald door 2 punten, is een poly vorm gedefinieerd door een reeks punten en een cirkelvorm wordt gedefinieerd door een punt, dat het centrum aangeeft en een radius. Alle punten worden gedefinieerd door een paar coördinaten, uitgedrukt in pixels, familieleden naar de linker bovenhoek van het beeld. Het attribuut vorm kan ook de "standaard" waarde, die verwijzen naar de delen van het beeld niet in kaart gebracht met een van de vorige vormen. Rekening houden, in plaats daarvan, dat de volgorde waarin de vormen worden in de kaart zijn belangrijk: als de "default" -vorm als de eerste vorm in de kaart definieert, zal het negeren alle volgende vormen, omdat de "default" vorm verwijst naar het gehele beeld. Dit geldt ook bij de vormen die elkaar overlappen: je kunt een beetje vorm in een grotere vorm te definiëren, maar je moet eerst de kleine vorm te definiëren en dan de grotere. Als 2 delen vormen een deel van het beeld, de vorm eerst gedefinieerd, wint.

Als u handmatig een beeld kaart moet je de coördinaten van alle punten nodig om de verschillende vormen te definiëren weten. Waarschijnlijk is dit niet een groot probleem als je weinig gebieden in kaart, vooral als u ronde of rechthoekige gebieden. Maar als je meerdere gebieden, met een veelhoekige vorm, ze handmatig instellen is geen eenvoudige taak.

Het beeld Mapper tool kunt u vormen zoals rect, poly, en cirkel op het geselecteerde beeld, die automatisch wordt vertaald in het bijbehorende HTML-code die de gebieden van de afbeelding gebruiker aanklikbaar maakt trekken.

Na het tekenen van de vormen op de gegeven afbeelding, kunt u de HTML-code te genereren op een knop te klikken en de code zal worden displayied in een textarea. U kunt de HTML-code te kopiëren en gebruiken in uw HTML-pagina (s). U kunt ook het omgekeerde proces: de HTML-code in het tekstveld te plakken, kunt u laadt deze code simpelweg te klikken op een knop; Dit zal worden vertaald in de vormen op het beeld en je kunt ze aanpassen, toevoegen van nieuwe vormen en opnieuw genereren van de HTML-code. Deze omgekeerde mechanisme is handig, zodat u een gedeeltelijke mapping proces slaan en door te gaan met het beeld later in kaart. Het is ook nuttig om "handmatig" het ontwerpen vorm / positionering verfijnen: na het genereren van de code in het tekstveld, kunt u de coördinaten in het tekstveld op de vlieg te wijzigen en opnieuw te laden.

Belangrijkste kenmerken:

  • U kunt een lokale of externe beeld te selecteren
  • U kunt de afbeelding doel maten ingesteld: dit zijn de maten die het beeld zal in uw HTML-pagina
  • U kunt in en uit de afbeelding in elk moment opnieuw en dit zal niet interfereren met de werkelijke coördinaten die worden gegenereerd, die alleen afhangt van de beoogde afmetingen van de afbeelding. De zoomfunctie is alleen nuttig om u te helpen de vormen te tekenen.
  • U kunt verschillende parameters voor elke vorm, zoals de "href" attribuut, het attribuut "alt", de "id" en "klasse" attributen en tenslotte het kenmerk "target" vastgesteld. Om de parameter die u hebt om de vorm te kiezen: naar een vorm die u hebt om de pijl linksboven in de werkbalk te selecteren en vervolgens op de vorm te selecteren.
  • De kaart van de "naam", de standaard URL en het doel: je kunt een aantal parameters voor de kaart in te stellen.
  • U kunt een vorm die de vorm te selecteren uit een werkbalk te trekken.
  • Om een ​​vorm te tekenen, nadat het selecteren uit de werkbalk, kunt u gewoon klikken met de muis op de afbeelding, waar u om de vorm te beginnen.
  • Als de vorm van een cirkel, de flirt punt is het centrum: het bewegen van de muis (klikken of losgelaten), kan je een cirkel die de cursor volgen zien. Nogmaals te klikken op de muis zal stoppen met het tekenen van de cirkel.
  • Als de vorm is een rect. het eerste punt is een van de hoek. Het bewegen van de muis (klikken of losgelaten) een rect trekken. Opnieuw klikken op de muis zal stoppen met tekenen.
  • Als de vorm is een poly het proces is een beetje anders: elke klik van de muis zal een punt in te stellen; het huidige punt is altijd verbonden met het sparren één, waardoor de poly altijd een gesloten vorm; stoppen om de poly te trekken (tot het laatste punt in te stellen), moet u dubbelklikken op de muis.
  • Voor alle vormen die je kunt ook stoppen te stellen hen te klikken op de "stop" knop (de pijl linksboven in de knoppenbalk).
  • U kunt de muis coördinaten wanneer u het bewegen op de afbeelding.
  • U kunt de grijs-gestreepte rand gebruiken rond het beeld om de rand coördinaten van het beeld te bepalen, zodat u de grens kunt gebruiken als het was een deel van het beeld: zo is, kunt u op de grens in de vorm tekening, jus als het maakte deel uit van het beeld. Bijvoorbeeld, als u klikt op de linkerbovenhoek van de grens, vindt u een punt op te stellen (0, 0) coördineert. Als je de linker-grens klik, in elk punt, zal je een punt op de (0, y) ingesteld coördinaten, enz.
  • U kunt een reeds getekende vorm te selecteren en te wijzigen / resize / verwijderen. Om het te verwijderen moet je de "rubber" in de werkbalk, die zal verschijnen als een afgewezen potlood alleen het selecteren van een vorm te gebruiken.
  • U kunt de kleur van de contour van het vormen van een reeks van 5 kleuren te kiezen (dit is niet een design tool, dus ik heb het aantal kleuren beperkt en ook u kunt een andere kleur voor elke vorm niet kiezen).
  • U kunt klikken op de "kaart" knop, dat is alleen zichtbaar als je de "stop" toets op de werkbalk en geen vorm is geselecteerd: als u een aantal vormen getrokken op de afbeelding vindt u de HTML-code te zien in een textarea, als je nog niet een vorm hebt getekend krijgt u een lege textarea te zien, maar je kunt het verleden in het enige HTML-code en deze te laden.
  • Te klikken op de "last" knop (die je alleen na het klikken op "kaart" knop kunt zien), zal de huidige HTML-code in het tekstveld worden vertaald in vormen op het beeld.

U kunt de volledige handleiding van het gereedschap op de volgende link te raadplegen: Online Manual

Als u vragen heeft, laat een reactie of stuur me een mailtje!


Downloaden
Andere onderdelen in deze categorieAlle onderdelen van deze auteur
OpmerkingenVeelgestelde vragen en antwoorden

Eigenschappen

Gemaakt:
10 oktober 12

Laatste update:
N / A

Hoge resolutie:
Nee

Compatibele Browsers:
Firefox, Opera, Chrome

Bestanden Inbegrepen:
JS JavaScript, HTML, CSS

Software Version:
HTML5

Trefwoorden

eCommerce, eCommerce, Alle spullen, app, gebied, canvas, cirkel, coö, rdineren, html5, afbeelding, kaart, Mapper, poly, rect, vorm, doelwit, gereedschap, zoom