Image Viewer

From CGWiki

Yarpsdat's Image Viewer

This is a handy little javascript page that allows you to display any image in your /images directory without having to create an html page for it. Instead, you simply add the image pathname to the end of the page url like so:

http://gear.keenspace.com/viewimage.html?title.png

And your image is displayed.

How to get it on your website:

Get the base viewimage.html code. Make any modifications you want so it looks pretty, but make sure you leave in the credits message (it's a condition of using the code, sorry).

Base Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Image Viewer</title>
                
</head>
<body>
***advertisement***              
<hr>The following image brought to you by <a href="/index.html">***comic_name***</a>
<p>
<script language="JAVASCRIPT">

<!--

 if (document.URL.lastIndexOf("?")==-1)

  {

   document.write("not enough parameters for the script!");

   document.write("this is not our fault!");

  }

  else

  {



  document.write("<img src='/images/");

 document.write(document.URL.slice(document.URL.lastIndexOf("?")+1, document.URL.length));

  document.write("'><br>");

  }



 //-->

</script></p>
<p>(Javascript courtesy of Yarpsdat of <a
 href="http://nowhere.keenspace.com">The Road From Nowhere</a>)</p>

 
***comic_name*** is hosted by <a href="http://www.comicgenesis.com">Comic Genesis</a>!
<p>
<br>
<br>
</body>
</html>

Upload the code to your /workspace/webpages folder.

Update your site, and viola!

Risky's Modified Image Viewer

This version of the image viewer is a little more sophisticated, and allows you to enter the image you want to see in a little text box. The base code is here and instructions are as above:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
 "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> 
<title>Risky Image Viewer</title> 
 
</head> 
<body> 
<div>***advertisement***</div> 

<div>This image is hosted by <a href="/">***comic_name***</a> on KeenSpace.</div> 


<div> 
<img src="/images/nosteal.jpg" name="viewimage" alt="viewimage" title="viewimage" /><br /> 

<script language="JAVASCRIPT" type="text/javascript"> 
<!-- 
//Javascript inspired by Yarpsdat of The Road From Nowhere 
//Code altered by Risky of Theelven 

imagedir = "/images/" 

if (document.URL.lastIndexOf("?") > -1) 
 { 
document.viewimage.src = imagedir+document.URL.slice(document.URL.lastIndexOf("?")+1, document.URL.length) 
 } 

//--> 
</script> 

What image do you want to see? 
<input id="a" type="text" size="20" /> 
<input type="button" onclick="document.viewimage.src = imagedir+document.getElementById('a').value" value="click me" /> 

</div> 
 
***comic_name*** is hosted by <a href="http://www.comicgenesis.com">Comic Genesis</a>. 


</body> 
</html>

Retrieved from "http://cgwiki.comicgenesis.com/index.php/Image_Viewer"

Category: Tutorials