How do I?

[gary]

Hello everyone,

I am a complete novice and have decided to do a website from scratch. I have been using W3Schools and find it very useful but I now have a problem and cannot find an answer!

 

I want to have a page where the user can import, via a link, two images to be placed side by side for comparison.

 

This is as far as I have got and cannot see a way forward.

 

html and css file as attached files, hope that's right!

 

I would like to spilt the page into left and right panes with both sides having links which the user can click to import the image which is then displayed below the links.

At the moment I can import only one image and only position it relative to the page size. When I try and duplicate the links and image it does not work. I cannot even get the page spilt into two panes.

 

Probably a simple mistake but please remember this is my first attempt and I am trying to learn from books and the net so be gentle with me

 

Any hints and tips would be most appreciated, thank you in advance.

 

 

 

 

 

 

 

 

Untitled.htm

Untitled.css

[davej]

You won't be able to upload a file to a server without server-side code such as Php.

[gary]

You won't be able to upload a file to a server without server-side code such as Php.

 

Thanks for your answer dave but I am not trying to upload a file to a server, at least i dont think I am .

 

I just want the visitor to see the screen split down the middle with a set of links to images on both sides.

The visitor can then hover over the links and the image will be displayed in a box below the image links.

A total of two images are to be displayed for comparison. Which two images to be decided by the visitor.

For example Image 1 on the left and Image 5 on the right.

The image below shows roughly how it should look and as you can see I have advanced a little since my original post!

However i am still not quite there as when I hover over one of the image links on the right hand side the image appears on the left

replacing the image that was there!

 

have added the new html and css files.

 

On going........

one.html

one1.css

[davej]

 

I want to have a page where the user can import, via a link, two images to be placed side by side for comparison.

 

 

What does this mean? Who provides these images?

[gary]

 

 

What does this mean? Who provides these images?

 

The images are to be stored on the server.

The user hovers over an image link on the left and it appears in the left image box, as shown on the screenshot I posted.

The same is supposed to happen on the right hand side so that the user see two different images to compare but I cant get it to work.

[Ingolme]

One problem you have is that you're giving the same ID to multiple images. An ID can only be used once per document. Another problem is that you're using a variable "img" which hasn't been set. If you want to get the image use document.getElementById()

[davej]

http://validator.w3.org/check shows 70 errors.

[gary]

One problem you have is that you're giving the same ID to multiple images. An ID can only be used once per document. Another problem is that you're using a variable "img" which hasn't been set. If you want to get the image use document.getElementById()

 

Have changed the ID's and changed to document.getElementById. Not sure I am using it right though!

 

http://validator.w3.org/check shows 70 errors.

 

Tentatively passed, 2 warning(s)

 

Can somebody please tell me if what I am after is even feasible using just html, css and a little java? I have been at this all day, am I wasting my time?

[Ingolme]

Yes, just showing images next to eachother and changing the images is a simple task that can be done with HTML, CSS and Javascript.

 

All you need to do is put onmouseover event handlers on the links, change the src attribute of the image when the event fires. Remember that you have two different images and you should reference the correct one when putting the event handler on the link.

 

You can learn how to manage events properly here: http://www.quirksmode.org/js/introevents.html

I advise against using event attributes right in the HTML.

[davej]

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Test Page</title><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>window.onload = function (){list = document.getElementsByTagName('a');for (var i=0, len=list.length ; i<len ; i++){if (list[i].parentNode.className=='sel'){list[i].onmouseover = hoverfunc;}}}function hoverfunc() {var path = this.href;if (this.parentNode.parentNode.className=='left'){img_left.src = path;}else if  (this.parentNode.parentNode.className=='right'){img_right.src = path;}else{alert('not right or left');}}//preload imagesvar img = [];var imgpath = 'images/';var imgfiles = ["obv1.png","obv2.png","obv3.png","obv4.png","obv5.png","obv6.png","obv7.png"];for (var i=0,len=imgfiles.length ; i<len ; i++){img[i] = new Image();img[i].src = imgpath + imgfiles[i];}</script><style>#wrap {margin: 0 auto;width: 1200px;border: 1px solid white;border-radius:25px;overflow:hidden;}body {background-color: #001;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 15px;line-height: 18px;color: #FFE7AD;}a { color: #FFE7AD; text-decoration: none;}a:hover { text-decoration: underline; color : #FFE7AD; font-weight:bold;}.left {margin: 30px 0px 30px 30px;float: left;border: 1px solid white;border-radius:25px;}.right {margin: 30px 30px 30px 0px;float: right;border: 1px solid white;border-radius:25px;}img{margin:20px;}.sel{margin-top:25px;display:block;border:1px dotted #555;text-align:center;}</style> </head><body><div id="wrap"><div class="left"><div class="sel">   <a href="images/obv1.png">Image 1</a><br/>   <a href="images/obv2.png">Image 2</a><br/>   <a href="images/obv3.png">Image 3</a><br/>   <a href="images/obv4.png">Image 4</a><br/>   <a href="images/obv5.png">Image 5</a><br/>   <a href="images/obv6.png">Image 6</a><br/>   <a href="images/obv7.png">Image 7</a></div>   <img id="img_left" src="images/obv1.png" width="500px" height="500px" alt="img_left"/> </div><div class="right"><div class="sel">   <a href="images/obv1.png">Image 1</a><br/>   <a href="images/obv2.png">Image 2</a><br/>   <a href="images/obv3.png">Image 3</a><br/>   <a href="images/obv4.png">Image 4</a><br/>   <a href="images/obv5.png">Image 5</a><br/>   <a href="images/obv6.png">Image 6</a><br/>   <a href="images/obv7.png">Image 7</a>	 </div>    <img id="img_right" src="images/obv2.png" width="500px" height="500px" alt="img_right"/></div><p style="clear:both"></p></div></body></html>

[gary]

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Test Page</title><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>window.onload = function (){var list = document.getElementsByTagName('a');for (var i=0, len=list.length ; i<len ; i++){list[i].onmouseover = hoverfunc; } }function hoverfunc() {var path = this.href;if (this.parentNode.parentNode.className=='left'){img_left.src = path;}else if  (this.parentNode.parentNode.className=='right'){img_right.src = path;}else{alert('not right or left');}}//preload imagesvar img = [];var imgpath = 'images/';var imgfiles = ["obv1.png","obv2.png","obv3.png","obv4.png","obv5.png","obv6.png","obv7.png"];for (var i=0,len=imgfiles.length ; i<len ; i++){img[i] = new Image();img[i].src = imgpath + imgfiles[i];}</script>

 

wow! dont you ever sleep? That is very much apprieciated, thank you very much. I am now trying to understand what is actualy going on there using the Link supplied by "Ingolme" below dealing with Javascript, eventhandlers and so on. Once again thank you for your patience with me and your time.

 

Yes, just showing images next to eachother and changing the images is a simple task that can be done with HTML, CSS and Javascript.

 

All you need to do is put onmouseover event handlers on the links, change the src attribute of the image when the event fires. Remember that you have two different images and you should reference the correct one when putting the event handler on the link.

 

You can learn how to manage events properly here: http://www.quirksmode.org/js/introevents.html

I advise against using event attributes right in the HTML.

 

Thanks for the Link "Ingolme". As you can see "davej" posted a working example which I was not expecting, just wanted to be pointed in the right direction. Now using the Link to try and work out what is happening in his example.

 

 

As I said I am a complete novice, I have a little knowledge of html and css and even less about Java . The object of me doing this project was and is to increase my knowledge.

Many thanks to both of you,

Gary

 

ps no doubt I will be back

[davej]

I went ahead and wrote up a rough solution because your code seemed to suffer from almost all the issues that we see from beginners.

 

1. Beginners tend to break their project up into several files before there is any need for several files.

2. Beginners tend to use excessive inline CSS.

3. Beginners tend to use excessive embedded event code.

4. Beginners tend to use absolute positioning -- when this is usually unnecessary and undesirable.

5. Beginners tend to misuse id's.

6. Beginners tend to mismanage float.

 

Now my rough solution is not ideal, for example it is not written to mix well with other code, but it covers most of the basics.

[gary]

I went ahead and wrote up a rough solution because your code seemed to suffer from almost all the issues that we see from beginners.

 

1. Beginners tend to break their project up into several files before there is any need for several files.

2. Beginners tend to use excessive inline CSS.

3. Beginners tend to use excessive embedded event code.

4. Beginners tend to use absolute positioning -- when this is usually unnecessary and undesirable.

5. Beginners tend to misuse id's.

6. Beginners tend to mismanage float.

 

Now my rough solution is not ideal, for example it is not written to mix well with other code, but it covers most of the basics.

 

Thanks again. I will look into your comments and take them onboard. You say it is not written to mix well with other code, if I add a normal Nav Menu to the page the fuction hoverfunc () is applied to this too giving an alert('not right or left'), is that an example of this?

[davej]

The problem would be that in a complex page with other code a simple window.onload function would conflict with any existing window.onload event handlers and also any added globals might conflict with existing globals.

 

Oh, you are right. I had a big oversimplification with the event handler assignment. Note changes above. Try...

window.onload = function (){list = document.getElementsByTagName('a');for (var i=0, len=list.length ; i<len ; i++){if (list[i].parentNode.className=='sel'){list[i].onmouseover = hoverfunc; } }}

[gary]

 

The problem would be that in a complex page with other code a simple window.onload function would conflict with any existing window.onload event handlers and also any added globals might conflict with existing globals.

 

Oh, you are right. I had a big oversimplification with the event handler assignment. Note changes above. Try...

window.onload = function (){list = document.getElementsByTagName('a');for (var i=0, len=list.length ; i<len ; i++){if (list[i].parentNode.className=='sel'){list[i].onmouseover = hoverfunc; } }}

 

thanks for that davej. Will try that out tomorrow, took a day off today, too much input for the old grey matter to take in. As for a complex page that is not the intention, only a list of image links and the two images oh yes and of cause a Nav Menu.