Jag har digitala kontaktkopier som jag skapat med att skanna negativstripar och stripparna har satts samman till kontaktkopia i LibreOffice samt exporterat resultatet som pdf. Jag vill kunna klicka på en delbild på kontaktkopian för att få upp en större storlek av den bild jag pekar på.
Hur gör jag i html?
Ps
-Jag vet hur man gör om jag har en separat bild att klicka på för att få större bild
-Det går att exportera i massa olika format från LibreOffice inte bra pdf
HTML, länk till bild från "kontaktkopia"
Re: HTML, länk till bild från "kontaktkopia"
Den kilckbara kontaktkartan på HTML-sidan skulle jag göra i något annat än PDF, t.ex. jpeg eller png.
Sedan finns det lite olika sätt att åstadkomma det du vill.
Om dina kontaktkartor är regelbundna så är nog det enklaste att använda MAP/AREA.
Ungefär så här.
Jag har inte kollat om jag tänkt rätt, men ska göra det.
I'll be back!
/π
Sedan finns det lite olika sätt att åstadkomma det du vill.
Om dina kontaktkartor är regelbundna så är nog det enklaste att använda MAP/AREA.
Ungefär så här.
Kod: Markera allt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML example with MAP/AREA</title>
</head>
<body>
<h2>Multiple clickable areas on image</h2>
<p> Click on different objects on image, each connected to unique link.</p>
<map name="clickmap">
<!-- Tip: 0,0 is top left. Order: x1, y1, x2, y2-->
<area shape="rect" coords="0,0,200,200" href="./link01.html" alt="img01">
<area shape="rect" coords="200,0,400,200" href="./link02.html" alt="img02">
<area shape="rect" coords="400,0,600,200" href="./link03.html" alt="img03">
</map>
<img usemap="#clickmap" src="./multipleimages.png" alt="clickpic" width="600px" height="200px">
</body>
</html>I'll be back!
/π
Re: HTML, länk till bild från "kontaktkopia"
Jag gjorde ett litet minimalistiskt testexempel.
Det blev så här.
Jag bifogar bilderna om du vill testa med mitt lilla testexempel.
Exemplet är gjort så att allt, html och bilder, ska ligga i samma mapp.
/π
Det blev så här.
Kod: Markera allt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML example with MAP/AREA</title>
</head>
<body>
<h2>Multiple clickable areas on image</h2>
<p> Click on different objects on image, each connected to unique link.</p>
<map name="clickmap">
<!-- Tip: 0,0 is top left. Order: x1, y1, x2, y2-->
<area shape="rect" coords="0,0,200,200" href="./img01.jpg" alt="img01">
<area shape="rect" coords="200,0,400,200" href="./img02.jpg" alt="img02">
<area shape="rect" coords="400,0,600,200" href="./img03.jpg" alt="img03">
</map>
<img usemap="#clickmap" src="./imgmap.jpg" alt="clickpic" width="600" height="200">
</body>
</html>Exemplet är gjort så att allt, html och bilder, ska ligga i samma mapp.
/π
Du har inte behörighet att öppna de filer som bifogats till detta inlägg.
Re: HTML, länk till bild från "kontaktkopia"
Man tackar ödmjukast.
Nu funkar det min din kod men bilderna måste vara mycket struktuerade (positionen i LibreOffie dok) eller annars massa handpåläggning.
Jag trodde att man behövde hacka nått i javascript. Innan jag såg html-koden höll på en stund med javascript men kom inte framåt. Dock hittade jag detta:
https://stackoverflow.com/questions/779 ... e-position
Koden längst ner.
Jag använde javscript koden för att hitta positionen för inkonbilderna, med det blev en del handräkning eftersom postionen i html skall anges relativt ikonbilden och jag har inte hittat syntaxen för tex "p.pageY+143". Jag får leta...
Nu funkar det min din kod men bilderna måste vara mycket struktuerade (positionen i LibreOffie dok) eller annars massa handpåläggning.
Jag trodde att man behövde hacka nått i javascript. Innan jag såg html-koden höll på en stund med javascript men kom inte framåt. Dock hittade jag detta:
https://stackoverflow.com/questions/779 ... e-position
Koden längst ner.
Jag använde javscript koden för att hitta positionen för inkonbilderna, med det blev en del handräkning eftersom postionen i html skall anges relativt ikonbilden och jag har inte hittat syntaxen för tex "p.pageY+143". Jag får leta...
