How to open .png files from a .html document?

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Post Reply
Message
Author
Antipodal
Posts: 253
Joined: Thu 26 Mar 2009, 16:52
Location: The other side of the world

How to open .png files from a .html document?

#1 Post by Antipodal »

Drawing electrical circuits on .bmp files, numbering them, then turning them into .png files and saving them in different source folders has allowed me to see all my drawings in an quick and controlled sequential manner by simply clicking on the lowest numbered .png file from the appropriate source folder in a ROX window and (after that file has opened by default in the Viewnior 1.1 window) pressing the arrow keys on my keyboard.

Using different colours in my drawings I can go back and forth and see how the electricity flows through different wires when different keys on the drawings are closed or opened and that is of great help to me.

I am now writing a HTML document that I would like to keep in another folder of the same partition where I'm keeping the source folders.

In that html document, I would like to link the name of the source folder with the lowest numbered .png file from that folder, in order to obtain a similar effect to the one I get/got when I do what I have described in the first paragraphs of this post.

I have tried with

Code: Select all

<!DOCTYPE html>
<html>
<body>
<a href="path_to_the_lowest_numbered_.png_file_on_the_source_folder">name_of_the_source_folder</a>
</body>
</html>
and the desired .png opens in my Seamonkey 2.9.1 browser but unfortunately the other .png files in the folder do not appear when I press the arrow keys I have mentioned above.

I don't mind seeing my drawings on the browser instead of on Viewnior 1.1 , What really bothers me is that I can't see the rest of the .png files I store in the source folder in the sequential manner I have described above by means of something as simple as four (easy to remember) keys on my keyboard.

I feel there must be some code for newbies that can solve my problem but I haven't found it yet.
While I continue with my search...
Can you please help me?

Thank you

Edited to correct typo in title: changed from ",html" to ".html"
Last edited by Antipodal on Sat 26 Sep 2015, 21:49, edited 1 time in total.
Posting from a P4 3Ghz_ASUS P5G41T-M LX3_2G RAM_DVD Write desktop with no internal HDD
Saving my stuff on flash sticks and in external USB HDD

User avatar
6502coder
Posts: 677
Joined: Mon 23 Mar 2009, 18:07
Location: Western United States

#2 Post by 6502coder »

Here's an example using Javascript.
It has been tested in Firefox and SeaMonkey.

The idea is to collect all the image pathnames in an array, and then switch which image is being displayed by altering the SRC attribute of the HTML IMG object when the left or right arrow key is pressed.

Of course everything depends on the naming convention you are using for your image files.
In my example, I had files named "jennifer-keller-01.jpg", "jennifer-keller-02.jpg", etc, so I could write a loop to synthesize the filenames since only the number was changing.

Also note that I've assumed the HTML file is in the same directory as the image files. If not, you'd have to change the spec for the basepathname accordingly. For example if the HTML file is in directory "A" and the images are in "B" and A and B have the same parent directory, then you'd have

basepathname = "../B/whatever"

Code: Select all

<!doctype html>
<html lang="en">
<head>

<script type="text/Javascript">
	var pix = [];
	var basepathname = "./jennifer-keller-";
	var nPix = 5;
	// For this example, we will assume that the image files
	// have names that look like "basepathname" followed by 
	// "01.jpg", "02.jpg", etc.
	// nPix is the number of image files

	var j, k;
	for (j=0; j < nPix; j++)
	{
		k = j+1; 
		pix[j] = new Image();
		pix[j].src = basepathname + (k < 10 ? "0" : "") + k + ".jpg";
	}

	var currentPic = 0;

	function changePic( e )
	{
		var p;
		p = document.getElementById("ActivePic");

		if (e == null)
		{
			p.src = pix[0].src;
			return;
		}
		if (e.keyCode == 39)
		{
			currentPic = (currentPic+1) % nPix;
  		}
		if (e.keyCode == 37)
		{
			currentPic = (currentPic == 0) ? nPix-1 : currentPic-1;
		}
		p.src = pix[currentPic].src;
	}
  
	document.onkeydown=changePic;

  </script>


 </head>
 <body onLoad="changePic(null);">
  
 <img id=ActivePic>
  
 </body>
</html>

Antipodal
Posts: 253
Joined: Thu 26 Mar 2009, 16:52
Location: The other side of the world

#3 Post by Antipodal »

Dear 6502coder

Thank you very much for your post.

Three hours after you sent it, I discovered a very practical and simple way to solve my problem.

At that time I realized I hadn't checked this thread to see if somebody had posted some help.

It was then when I read your message.

Though my knowledge about coding is very (extremely) poor and I know nothing about javascript, your post will be a very valuable javascript study material for me.

While I'm studying your code and making it work I have decided to use the following trick:
*)Instead of clicking on the

Code: Select all

<a href="path_to_the_lowest_numbered_.png_file_on_the_source_folder">name_of_the_source_folder</a>
link on the .html document, I will drag the link and drop it on the desktop.
*)That will create (on the desktop) an icon for the "lowest_numbered_.png_file_on_the_source_folder".
*)If I left click on it, the desired file opens on a Viewnior 1.1 window.
*)If I keep this window active and use the arrow keys on my keyboard wisely I will be able to go back and forth in a quick and controlled sequential manner through all the .png files that share the source folder with this file.
:)
That will give me time to study and practice the javascript solution you have kindly offered me. :)
:)
Thanks again. :)
Posting from a P4 3Ghz_ASUS P5G41T-M LX3_2G RAM_DVD Write desktop with no internal HDD
Saving my stuff on flash sticks and in external USB HDD

User avatar
6502coder
Posts: 677
Joined: Mon 23 Mar 2009, 18:07
Location: Western United States

#4 Post by 6502coder »

@Antipodal

Glad you found a simple, practical solution! One of my favorite books on programming techniques is Jon Bentley's "Programming Pearls." Although old (1986) it's full of great practical advice. In the very first chapter he warns, if someone asks you how to do something, don't just jump in and start writing code. First find out WHY they want to do that, and what the real, underlying problem is. The correct solution may be something completely different from what they were asking for.

Obviously, it's time for me to re-read that book! ;-)

Anyway, if you do decide to look into Javascript further, feel free to PM me with any questions you might have. I might tinker awith this a bit more just for fun. If I come up with anything interesting I'll post it in this thread.

Antipodal
Posts: 253
Joined: Thu 26 Mar 2009, 16:52
Location: The other side of the world

#5 Post by Antipodal »

@6502 coder
6502coder wrote:Anyway, if you do decide to look into Javascript further, feel free to PM me with any questions you might have.
6502coder wrote: I might tinker awith this a bit more just for fun. If I come up with anything interesting I'll post it in this thread.
Thank you! :D
I'll take your word for both statements

Post Reply