Images as links to different content

@ThePostmanApr 14.2009

Hello

I have a snippet of JS which I would like to customise so that by clicking on image A of the horizontal images I have along the top, I would like it to load Content A below; by clicking on image B I would like content B to load below it.

The code I have is this:

[CODE] <head> <script type=”text/javascript” src=”../_common/js/mootools.js”></script> <script type=”text/javascript” src=”imageMenu.js”></script> </head> <body>

<div id=”imageMenu”> <ul> <li class=”theme1″><a href=”file1.html”>Theme1</a></li> <li class=”theme2″><a href=”file2.html”>There2</a></li> <li class=”theme3″><a href=”file3.html”>Theme3</a></li> </ul> </div>

<script type=”text/javascript”>

window.addEvent(‘domready’, function(){ var myMenu = new ImageMenu($$(‘#imageMenu a’),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}}); }); </script>[/code]

What is the best way of starting this, please?

Thanks.

to post a comment

JavaScript

9 Comments(s) _↴

@JMRKERApr 14.2009 — #See earlier posts, but in particular #12, of this thread: http://www.webdeveloper.com/forum/showthread.php?t=206261&highlight=gallery

Assuming I understand the request, I think with modifications it will do what you what. ?

@ThePostmanauthorApr 14.2009 — #Hello JMRKER

Many thanks for your speedy reply.

I have quickly read through that discussion and item 12. That looks more like an image gallery whose images link to various online Web pages.

Mine is slightly different. If you can imagine 4 or 5 images (not large, but not thumnails either) arrayed across the top of the Web page. There is nothing below them except a blank HTML page.

If I click on the first image from the left it loads text into the empty main frame below the array of images (just like frames do, or did, before they became unfashionable). Clicking on the next photo along, again, it would load different content into the empty main frame below the array of images. And so on.

The images are not linked to anything on the Web - these are all HTML files which will be used offline on a CD.

Cheers

@JMRKERApr 14.2009 — #Even simpler. Consider this ...

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Pseudo Frames&lt;/title&gt;
 &lt;style type="text/css"&gt;
 #headline {
 text-align:center;
 margin-left:auto;
 margin-right:auto;
 }
 .linkpages {
 display:none;
 }
 &lt;/style&gt;
 &lt;script type="text/javascript"&gt;
 var pages = ['page1','page2','page3','page4','page5'];
 
 function Show(IDS) {
 for (var i=0; i&lt;pages.length; i++) {
 document.getElementById(pages[i]).style.display='none';
 }
 document.getElementById(IDS).style.display='block';
 }  <br/>
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="headline"&gt;
 &lt;a href="#" onclick="Show('page1');return false"&gt;
 &lt;img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif" alt="image 1" height="150" width="150"&gt;
 &lt;/a&gt;
 &lt;a href="#" onclick="Show('page2');return false"&gt;
 &lt;img src="" alt="image 2" height="150" width="150"&gt;
 &lt;/a&gt;
 &lt;a href="#" onclick="Show('page3');return false"&gt;
 &lt;img src="" alt="image 3" height="150" width="150"&gt;
 &lt;/a&gt;
 &lt;a href="#" onclick="Show('page4');return false"&gt;
 &lt;img src="" alt="image 4" height="150" width="150"&gt;
 &lt;/a&gt;
 &lt;a href="#" onclick="Show('page5');return false"&gt;
 &lt;img src="http://javascript.internet.com/img/headerlogo.gif" alt="image 5" height="150" width="150"&gt;
 &lt;/a&gt;
 &lt;/div&gt;
 &lt;hr&gt;
 
 &lt;div id="page1" class="linkpages"&gt;
 Content of Page 1&lt;br&gt;
 &lt;a href="http://www.webdeveloper.com"&gt;Web Developer&lt;/a&gt;
 &lt;/div&gt;
 
 &lt;div id="page2" class="linkpages"&gt;Content of Page 2&lt;/div&gt;
 &lt;div id="page3" class="linkpages"&gt;Content of Page 3&lt;/div&gt;
 &lt;div id="page4" class="linkpages"&gt;Content of Page 4&lt;/div&gt;
 
 &lt;div id="page5" class="linkpages"&gt;
 Content of Page 5&lt;br&gt;
 &lt;a href="http://www.javascriptsource.com"&gt;Javascript Source&lt;/a&gt;
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

@ThePostmanauthorApr 16.2009 — #Hello JMRKER

Thanks again for your reply.

That is so incredible close to what I would like, it's a sif you have read my mind!

I need to make a couple of minor alterations and will get back to you if I need to (if you don't mind), but your script is very useful.

Cheers

Postman

@JMRKERApr 16.2009 — #You're most welcome.

Glad I was able to help.

Good Luck!

?

@ThePostmanauthorApr 16.2009 — #Hello

What I am trying to do is your use script (I have modified it to 5 images) with the script I have here:

http://stevehigham59.7host.com/ImageTest/imagemenu/main.html

The above link does not contain any of your script, but both your own script and that which is behind the link about, work on their own.

What I am trying to do, therefore, is combine both, bearing in mind that the eventual outcome will not be used on a server, but on a CD.

On the above link I should be able to click on the first image (landscapes) and then, using your script, some content for landscapes should appear in the space below - just as your script does. Again, if I click on the second image (people), some content for people should appear in the space below - again, just as in your script.

I think I am getting a conflict, because your script uses:

[CODE]<div id="page2" class="linkpages">Content of Page 2</div>[/CODE]
while the script behind my link uses:

[CODE]<li class="landscapes"><a href="http://www">Landscapes</a></li>[/CODE]
I presume the browser, therefore, does not know how to interpret the 'class' element. Is that right?

If it helps, I can post the script behind the link above?

Many thanks again for your help.

Cheers

Steve

@JMRKERApr 16.2009 — #The class assignment should not be the problem as you can have several different classes in a document.

Pare you script down to the minimum that it takes to show the images and the problem you are trying to resolve.

Incorporate both your link display above and the new code I posted where you think they should go.

Don't need the links, but you can leave in comments about where you expect replacement code to go.

Let's start from a common script and go from there.

@ThePostmanauthorApr 16.2009 — #Hello JMRKER

OK, I think I have made some strides foward.

This is what I have at the moment (an attempt to combine both scripts):

[CODE]<html>
 <head>
 
 <script type="text/javascript" src="../_common/js/mootools.js"></script>
 <script type="text/javascript" src="imageMenu.js"></script>
 
 <style type="text/css">
 
 .linkpages {
 display:none;
 }
 </style>
 
 
 <script type="text/javascript">
 var pages = ['page1','page2','page3','page4','page5'];
 
 function Show(IDS) {
 for (var i=0; i<pages.length; i++) {
 document.getElementById(pages[i]).style.display='none';
 }
 document.getElementById(IDS).style.display='block';
 } 

 </script>
 
 </head>
 <body>
 
  <div id="imageMenu">
   <ul>
 <li class="landscapes"><a href="#" onclick="Show('page1');return false">Landscapes</a></li>
 
 <li class="people"><a href="page2.html" onclick="Show('page2');return false">People</a></li>
 
 <li class="nature"><a href="#" onclick="Show('page3');return false">Nature</a></li>
 
 <li class="urban"><a href="#" onclick="Show('page4');return false">Urban</a></li>
 
 <li class="abstract"><a href="#" onclick="Show('page5');return false">Abstract</a></li>
 </ul>
 </div>
 
 <script type="text/javascript">
 
  window.addEvent('domready', function(){
   var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
 });
 </script>
 </div> 
 
 <div id="page1" class="linkpages">Landscapes<br></div>
 <div id="page2" class="linkpages">People</div>
 <div id="page3" class="linkpages">Nature</div>
 <div id="page4" class="linkpages">Urban</div>
 <div id="page5" class="linkpages">Abstract<br>
 </div>
 
 </body>
 </html>[/CODE]

And it can be seen here:

http://stevehigham59.7host.com/ImageTest/imagemenu/thisTEST.html

If you click on an image you will see that the browser seems to be looking for a file that is not there. So, I created an html file (which shows only the words 'page 2'), called page2.html and inserted it in the script above. I have uploaded everything, including page2.html onto a server. Page2.html is in the same folder as the thisTEST.html file, yet it still cannot locate it.

Is the script above something you think might have potential??!!

Cheers

Steve

@JMRKERApr 16.2009 — #I don't have the 'mooTools.js', "imageMenu.js" or the CSS files you reference,

so in your last posted code I just commented them out TEMPORARILY

to show that your concept should work once we figure out the conflicts.

Add you libraries back in one at a time to try to figure out where the conflict is occurring.

<i>
 </i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
 &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
 &lt;title&gt;proofreading : image menu&lt;/title&gt;
 
 &lt;!-- I don't have the following, so just commented it out TEMPORARILY
 &lt;link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all"&gt;
 &lt;link href="imageMenu.css" rel="stylesheet" type="text/css" /&gt;
 &lt;script type="text/javascript" src="../_common/js/mootools.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="imageMenu.js"&gt;&lt;/script&gt;
 --&gt;
 
 &lt;style type="text/css"&gt;
 .linkpages {
 display:none;
 }
 &lt;/style&gt;
 
 &lt;script type="text/javascript"&gt;
 var pages = ['page1','page2','page3','page4','page5'];
 
 function Show(IDS) {
 for (var i=0; i&lt;pages.length; i++) {
 document.getElementById(pages[i]).style.display='none';
 }
 document.getElementById(IDS).style.display='block';
 }  <br/>
 &lt;/script&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 
 &lt;div id="container"&gt;
 
 &lt;div id="example"&gt;
 
 &lt;!-- TEMPORARY for testing purposes --&gt;
 &lt;div id="imageMenu" style="text-align:center"&gt;
 &lt;span&gt;&lt;img src='Landscape' alt="Landscape" height="100 width="100" border="1" onclick="Show('page1');return false"&gt;&lt;/span&gt;
 &lt;span&gt;&lt;img src='People' alt="People" height="100 width="100" border="1" onclick="Show('page2');return false"&gt;&lt;/span&gt;
 &lt;span&gt;&lt;img src='Nature' alt="Nature" height="100 width="100" border="1" onclick="Show('page3');return false"&gt;&lt;/span&gt;
 &lt;span&gt;&lt;img src='Urban' alt="Urban" height="100 width="100" border="1" onclick="Show('page4');return false"&gt;&lt;/span&gt;
 &lt;span&gt;&lt;img src='Abstract' alt="Abstract" height="100 width="100" border="1" onclick="Show('page5');return false"&gt;&lt;/span&gt;
 &lt;/div&gt;
 &lt;!-- --&gt;
 
 &lt;!-- TEMPORARILY DELETED
 &lt;div id="imageMenu"&gt;
 &lt;ul&gt;
 &lt;li class="landscapes"&gt;&lt;a href="#" onclick="Show('page1');return false"&gt;Landscapes&lt;/a&gt;&lt;/li&gt;
 &lt;li class="people"&gt;&lt;a href="page2.html" onclick="Show('page2');return false"&gt;People&lt;/a&gt;&lt;/li&gt;
 &lt;li class="nature"&gt;&lt;a href="#" onclick="Show('page3');return false"&gt;Nature&lt;/a&gt;&lt;/li&gt;
 &lt;li class="urban"&gt;&lt;a href="#" onclick="Show('page4');return false"&gt;Urban&lt;/a&gt;&lt;/li&gt;
 &lt;li class="abstract"&gt;&lt;a href="#" onclick="Show('page5');return false"&gt;Abstract&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
 &lt;/div&gt;
 
 &lt;script type="text/javascript"&gt;
 window.addEvent('domready', function(){
 var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
 });
 &lt;/script&gt;
 --&gt;
 
 &lt;/div&gt; 
 &lt;hr&gt;
 &lt;div id="page1" class="linkpages"&gt;Landscapes&lt;br&gt;&lt;/div&gt;
 &lt;div id="page2" class="linkpages"&gt;People&lt;/div&gt;
 &lt;div id="page3" class="linkpages"&gt;Nature&lt;/div&gt;
 &lt;div id="page4" class="linkpages"&gt;Urban&lt;/div&gt;
 &lt;div id="page5" class="linkpages"&gt;Abstract&lt;br&gt;
 
 &lt;/div&gt;
 
 &lt;/body&gt;
 &lt;/html&gt;

Also in #JavaScript _↴

Exploiting cached versions of scripts, fix?add class if div is empty - how?New to JS

Success!

Help @ThePostman spread the word by sharing this article on Twitter...

Tweet This

Images as links to different content

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Images as links to different content

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴