i mostly use pen and paper but i'm definitely following this thread as computer programmes like wikis would help a lot!
i mostly use pen and paper but i'm definitely following this thread as computer programmes like wikis would help a lot!
avatar by chuckdrawsthings. thanks chuck!
🛸Locus is creating Locus: The Magazine of the Science Fiction and Fantasy Field🛸
🌲link🌲tree🌲
Hi
Do you want to do something like that ?
http://bindusara.free.fr/web/mdt-geo...ICIEL=Officiel
The world map is clickable, and go to other html pages
I think the easiest way is to make a basic internet site, with this kind of clickable map (using the MAP html TAG over an image), each click going to a new page as i did on my own site. H
An exemple of map generator, using an image : https://sourceforge.net/projects/imagemapper/
CLick load image
Then for example Rectangle HotSpot
Go to the upper left side of your image : you'll see a square. Move it on your image, resize it in a rectangle shape.
In the bottom you'll see html code :
<html>
<head>
<title>Image Map Sample</title>
</head>
<body>
<map name='map'>
<area shape='rect' coords='418,255,681,311' />
</map>
</body>
</html>
and on the bottom right a window called "Outline". Click on the aera : it's the rectangle you've drawn.
On the upper right, a properties box : the main important thing is the HREF line : it's an html adress that you'll have to enter (the link to the information you want to give on your clicakable map)
At the bottom, it changes the html code :
<html>
<head><title>Image Map Sample</title></head>
<body>
<map name='map'>
<area shape='rect' coords='418,255,681,311' target='my html adress' />
</map>
</body>
</html>
ANd you'll say, what's next? Well : open a notepad, copy past the html code.
Add the green code below
<html>
<head><title>Image Map Sample</title></head>
<body>
<img src="NAME_OF_MY_IMAGE.jpg (or gif or whatever)"
width="600" (optionnal)
height="300" (optionnal)
usemap="#map"
border=0>
<map name='map'>
<area shape='rect' coords='418,255,681,311' HREF='the target html adress (another image for exemple, in the same directory' />
</map>
</body>
</html>
Save in your working directory with HTML extention. Copy your image in the same directory. Copy the image of the HREF property in the same directory.
Open your test file with Firefox, Opera or another internet browser. The image is clickable, you've got a link on it, only on the rectangular part you choose
And what's netx? Do the same for all the clickable area you need on your map : you don't need to do all the clickable parts in one session. If you split your work, do the same with new clickable area, and copy paste only the <area \> in your file, between the <map> .... </map>, adding it to others ones. It will works fine.
Some of your html link will be pages : make some html pages with libreoffice, Office365, or whatever editor you need.
Put the files int he SAME DIRECTORY! If you want some sub-directories, you can. The HREF will be "MY-SUB-DIRECTORY/my_file_name.html"
==> hope it will help. It's not very simple for a beginner. If it doesn't work well, i'll try to help you, don't hesitate asking question. But first try simple!! Just one image, one link. And then try to add a new one!!
it seems that you can do similar work with LibreOffice
See the tutorial on
https://listoffreeware.com/best-free...tware-windows/
add to my previous post :
i found this online site : https://www.image-map.net/
That do the same, but you can make some polygonal areas, that far better. It's seems easier to do the work with that.
Posting Permissions
Reply With Quote