Offline image mapping

[Drake_Jungblud]

Looking to do offline image mapping where links aren't urls, but open another image and so forth. I know there are bunch of image map generators, but I want the link to point to another image and then within the image creating more links to other images. It's for making offline simple simulator of a software program for offline training. Any suggestions or am I way off base?

 

[Hichem]

If I understand your question correctly, you want to create an offline image map where each link points to another image, which then has its own set of links to other images. This is definitely possible and there are a few different ways to approach it.

One option is to use a tool like Adobe Photoshop or GIMP to create your image map, where each clickable area is defined as a separate layer. You can then export the image as an HTML file with image maps, which will create the necessary HTML code to display the image and make the areas clickable. To make the links open other images, you can simply define the URL for each area as the file path to the image you want to open.

Another option is to use an HTML editor like Dreamweaver or Notepad++ to create the image map manually. You can define each clickable area using HTML code, and specify the URL for each link as the file path to the image you want to open.

Once you have your image map set up, you can create additional links within the images themselves by repeating the process above - creating new clickable areas and defining their URLs as the file paths to other images.

Overall, while this approach may require a bit of HTML and image editing know-how, it should be fairly straightforward to create the type of offline simulator you're describing.

 

[Drake_Jungblud]

If I understand your question correctly, you want to create an offline image map where each link points to another image, which then has its own set of links to other images. This is definitely possible and there are a few different ways to approach it.

One option is to use a tool like Adobe Photoshop or GIMP to create your image map, where each clickable area is defined as a separate layer. You can then export the image as an HTML file with image maps, which will create the necessary HTML code to display the image and make the areas clickable. To make the links open other images, you can simply define the URL for each area as the file path to the image you want to open.

Another option is to use an HTML editor like Dreamweaver or Notepad++ to create the image map manually. You can define each clickable area using HTML code, and specify the URL for each link as the file path to the image you want to open.

Once you have your image map set up, you can create additional links within the images themselves by repeating the process above - creating new clickable areas and defining their URLs as the file paths to other images.

Overall, while this approach may require a bit of HTML and image editing know-how, it should be fairly straightforward to create the type of offline simulator you're describing.

Much appreciated for the help and advice! I have been able to map the main image so the areas are defined as clickable, just not sure about the code to use to link those areas to be directed to the next image. I have found plenty of use case examples for hyperlinks to external websites, but it is the specific code for just directing to another image rather than a link to a website. I will look into the Adobe Photoshop or GIMP route, or notepad ++ as it may be more in my league. Most my coding is being done in visual basic studio for Windows 10. I am a major newb. Took a visual basic class in collage years ago and though I don't remember much, it is what I was familar with. I will try the file path rather than the url. Again thank you for the kind help.

 

[Drake_Jungblud]

Hichem, Thank you! Got the main image mapped in visual basic with clickable links to other images, which is fantastic! Simply putting in the img.png instead like you suggested did the trick! My first landing image has about 60 clickable areas directed to other images and it works perfect.

Example of my code for the first image, which works well enough. The links have hover pop ups explaining the function of the feature. When you click on it, it opens to the corresponding image.

I am now trying to figure out the code structure to map those secondary images that are mapped to the first image, so they will have links to another image. I have tried mapping these secondary images, but not sure how it fits within my existing map structure as shown below

<!DOCTYPE html>
<html>
<head>
<title>Image Map</title>
</head>
<body>

<img usemap="#mymap" src="IV 1.10 System Setting Screen.png" width="1920px">

<map name="#mymap">
<area alt="IV 1.10 System Menu" title="System Settings Menu" href="IV 1.10 System Setting Screen Menu Drop Down.png" coords="1520,5,1570,53" shape="rect">
<area alt="Detector Status" title="Detector Status" href="IV 1.10 System Setting Screen with Detector Quicklink.png" coords="1496,2,1407,60" shape="rect">
<area alt="Help Menu" title="Help Menu" href="Record Issue & Help_About_K_Console_InfoMenu.png" coords="1575,-2,1662,74" shape="rect">
<area alt="Worklist" title="Worklist" href="IV 1.10 Worklist screen.png" coords="929,3,1030,53" shape="rect">
<area alt="Views Menu" title="Views Menu" href="" coords="1332,3,1402,50" shape="rect">
<map>

<body>
<html>