Hem
Forum
Donera
Webbutik

Översikt
Nya inlägg
Obesvarade trådar
Sök i forum

Mjukvara och tjänster
Programmering och utveckling

Maphilight med jquery och php-include...

Tråden skapades 2010-12-11 och har fått 12 svar. Det senaste inlägget skrevs 2011-04-11.

Skriv svar

2010-12-11 18:40

klarabara
Medlem ●
Stockholm
2010-12-11 18:40

Jag jobbar för tillfället på den här sidan med jquery Maphilight: TEDDY

Jag hittade i deras docs (jQuery maphilight documentation ) att man kunde göra så varje fält fylls med olika färg genom att klistra in class="{fillColor:'00ff00'}" i area-taggen. Detta vore absolut perfekt, bara att jag inte får det att fungera. Jag har prövat att lägga det som css istället (det skadar ju inte att försöka) men det har ju heller inte fungerat. Är det något som man behöver ändra i map-hilight.js-filen?

Jag har ju utöver det gjort sidan med php-include och lagt in <?php if ($thisPage=="ear_left") echo " id=\"currentpage\""; ?> i area-taggen och <?php $thisPage="ear_left"; ?> i php-filen. Hade det varit som en vanlig meny så hade jag kunnat styla den biten i css-filen med #currentpage, #currentpage a{} men det fungerar så klart inte heller. Jag skulle gärna se att den kroppsdel man klickat på fortsätter att vara färglagd medan man läser...

Någon som kan ge råd om den här frågan?

Anmäl Ändra Gilla Svara

2010-12-13 11:45

klarabara
Medlem ●
Stockholm
2010-12-13 11:45

Ingen som kan peta mig i rätt riktning ens?

Anmäl Ändra Gilla Svara

2010-12-14 12:15

pichia
Medlem ●
Göteborg
2010-12-14 12:15

Du får ha en script-slinga på varje undersida, tex i eye_left.php, i stil med (har inte testat):

<script type="text/javascript">
     var data = $('#eye_left').data('maphilight') || {};
     data.alwaysOn = true;
     $('#eye_left').data('maphilight', data);
</script>

Obs! se till att du har olika id till de olika areorna i map-en

Anmäl Ändra Gilla Svara

2010-12-14 08:27

pichia
Medlem ●
Göteborg
2010-12-14 08:27

Hej Klara, Jag har ingen direkt hjälp att erbjuda, men kanske en liten förklaring:
Det verkar som att pluginen lägger en canvas ovanför bilden där de aktuella formerna ritas med hjälp av areakoordinaterna. Det är renodlat javascript och ingenting man kommer åt via css. Det är även anledningen till att den har en lite egen stil-syntax (text 'fillColor'). Det verkar vara en fiffig lösning, men utförandet är något kryptiskt ur användar-(läs: webdesigner/utveckare)-synpunkt: hur korrekt är det att vidarebefodra javascript-parametrar via style-attributen?

Den verkar använda sig av en annan plugin: metadata. Har du testat att ta med den?

Anmäl Ändra Gilla Svara

2010-12-14 10:54

klarabara
Medlem ●
Stockholm
2010-12-14 10:54

Hej pichia!
Jo jag fick den hinten klockan två inatt av en vänlig själ i australien, det räckte med att lägga in den pluginen och vips!
Ibland ser man inte skogen för alla träden..

TEDDY <<resultat!

Så mycket svårare var det tydligen inte.. jQuery o allt det där är väl nästa steg att lära sig efter php..

Har inte fått det att stanna på ifyllt när man klickat, jag tror det är nånstans i koden, kanske så enkelt som att ändra "true" till "false"?
Ska ge mig in i det när jag har sovit lite..

Tack!

Anmäl Ändra Gilla Svara

2010-12-14 16:19

klarabara
Medlem ●
Stockholm
2010-12-14 16:19

och så kod-snutten... det fungerar tyvärr inte. TEDDY
(provade bara att ändra koden på left eye-sidan)

Anmäl Ändra Gilla Svara

2010-12-14 19:01

pichia
Medlem ●
Göteborg
2010-12-14 19:01

Jag tycker att det ser "rätt" ut det du har gjort i eye_left.php, men det funkar uppenbarligen inte. Enligt de exempel de har på pluginens hemsida, verkar de hindra ett "default"-beteende med " e.preventDefault();" när de skall göra något annat med den aktuella arean. Frågan är vilket "event" som skall trigga förändringen här. Det är inte click eller mouseover. Testa med ready?:

$('#eye_left').ready(function(e) {
            e.preventDefault();
            var data = $('#eye_left').data('maphilight') || {};
            data.alwaysOn = true;
            $('#eye_left').data('maphilight', data);
        });

Anmäl Ändra Gilla Svara

2010-12-14 21:02

klarabara
Medlem ●
Stockholm
2010-12-14 21:02

Fick inte det att fungera det heller.

Jag testade att ställa om några saker till false, men det hjälpte inte heller...

Kan det ha att göra med alwaysOn?

Har märkt att det nu blinkar till efter man har klickat? Innan har det liksom fade:at in en "filling" av en yta, nu blinkar den till efteråt. Eller är det mina ögon som är trötta?

Anmäl Ändra Gilla Svara

2010-12-15 09:10

#10

pichia
Medlem ●
Göteborg
2010-12-15 09:10

Jo det är just alwaysOn som ser till att en area ständigt är färgat om den är satt till true för den arean. Men sen måste den även aktiveras. Det missade jag ovan in #5, se sista raden med trigger-biten. Klistra in den som följande i den befintliga script-taggen i eye_left.php:

$(document).ready(function() { 
	      var data = $('#eye_left').data('maphilight') || {};
	      data.alwaysOn = true;
	      $('#eye_left').data('maphilight', data).trigger('alwaysOn.maphilight');
      });

Det skall funka...

Anmäl Ändra Gilla Svara

2010-12-15 11:01

#11

klarabara
Medlem ●
Stockholm
2010-12-15 11:01

WOOOOOW!
Det fungerar!

Helt underbart! Sidan gick från bra till Suverän!

Tack!!!

Anmäl Ändra Gilla Svara

2010-12-15 19:58

#12

pichia
Medlem ●
Göteborg
2010-12-15 19:58

Kul!
Jag blev själv lite nyfiken på potentialen hos denna något kantig men fiffig plugin. Det skulle kunna vara en nytändning för lätt dammiga html-bildmappar.
Min motfråga är dock: Hur har du fått ut koordinatpunkterna till nallebilden? Finns det något verktyg som hjälper till med detta?

Anmäl Ändra Gilla Svara

2010-12-15 23:29

#13

klarabara
Medlem ●
Stockholm
2010-12-15 23:29

Jag försökte med att göra om den till svg-fil och i ink-scape ta ut koordinaterna genom "edge-detection" men det gick så dåligt att jag satt och gjorde allt för hand.... inte att rekommendera. Fick dessutom göra om det tre gånger för att designen ändrades etc..att göra för hand menar jag sitta och följa varje linje med musen och skriva ner koordinater i info-fönstret och sen skriva in dessa i koden.. som sagt. Tid tog det.

[lite offtopic]Så css och markup är lite messy, har inte validerat heller *blush*
Det är en hel del "efter-arbete" som jag nog inte tänkt på innan. När man vill putsa upp koden, kommentera css'en och lägga in keywords etc.. [/lite offtopic]

Troligen ska allt putsas upp till hösten och inför det tänkte jag göra om själva bilden till en svg-fil och ta ut koordinaterna såhär:
Creating an image map from SVG < David Lynch
och zippade scripts: http://davidlynch.org/toys/svg2imagemap.zip

Kanske att det kan fungera så enkelt?

(Tydligen skulle kartan varit ännu finare som png, massa saker jag vill fixa till.... aaah)
Jag fick lite extra fnurr på det hela (med hjälp) genom att lägga till fade=false på varje undersida så blev det inte det där blinket. Det kom eftersom undersidan har menyn som include, då laddas den en gång till. Sen ändrade jag fade-tiden till 25 istället för 10, så nu är det smooooth..

Tack så väldigt mycket för hjälpen, igen!

Anmäl Ändra Gilla Svara

2011-03-17 10:36

#14

klarabara
Medlem ●
Stockholm
2011-03-17 10:36

Nu sitter man här o försöker med en svg-fil direkt från illustrator, så jag har alla "koordinater" men de är ju i ett format som inte html gillar, så jag tänkte att jag sätter in dem i den här: Polygonator

Problemet är bara att svg-filen innehåller både "C" och "c" (som betyder olika saker) men polygonator tar inte hänsyn utan skippar de små. Vilket resulterar i helt oanvändbara koordinater...

Finns det någon här på forumet som kan javascript nog för att kunna hjälpa mig eller kan skicka mig till ett annat verktyg?

Mycket tacksam för all hjälp!