Probably the easiest HTML question ever... but I need help.

[savage1987]

I've only tonight started playing around with HTML, have been reverse engineering this template for my own devices...

There's a selectable image section in there which seems to be coded wrong to start with. It works fine when hovering the mouse over the thumbnails, the main image changes accordingly. When you click the main image, however, instead of opening the image it's currently displaying, it ALWAYS opens the first image (of the Kindle).

I'm guessing the problem lies somewhere in this section of code

<div id="images">
	 	<div id="mainImage">   
			<a href="http://ebayappreview.com/templates/images/products/amazonkindle.jpg" target="_blank"><img src="http://ebayappreview.com/templates/images/products/amazonkindle.jpg" width="400" height="300" hspace="0" vspace="0" border="0" align="left" name="mainphoto"></a>
		</div>
	  	<div id="thumbImage">
		  	<!-- image one -->
		   	<a OnMouseOver="mainphoto.src='http://ebayappreview.com/templates/images/products/amazonkindle.jpg';" OnMouseOut="mainphoto.src='http://ebayappreview.com/templates/images/products/amazonkindle.jpg';">
		  	<img src="http://ebayappreview.com/templates/images/products/amazonkindle.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
		  	<!-- image two -->
		  	<a OnMouseOver="mainphoto.src='http://ebayappreview.com/templates/images/products/iphone3g.jpg';" OnMouseOut="mainphoto.src='http://ebayappreview.com/templates/images/products/iphone3g.jpg';">
		  	<img src="http://ebayappreview.com/templates/images/products/iphone3g.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
		  	<!-- image three -->
		  	<a OnMouseOver="mainphoto.src='http://ebayappreview.com/templates/images/products/palmpre.jpg';" OnMouseOut="mainphoto.src='http://ebayappreview.com/templates/images/products/palmpre.jpg';">
		  	<img src="http://ebayappreview.com/templates/images/products/palmpre.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
		  	<!-- image four -->
		  	<a OnMouseOver="mainphoto.src='http://ebayappreview.com/templates/images/products/pspconsole.jpg';" OnMouseOut="mainphoto.src='http://ebayappreview.com/templates/images/products/pspconsole.jpg';">
		  	<img src="http://ebayappreview.com/templates/images/products/pspconsole.jpg" width="80" height="60" hspace="10" vspace="8" border="0" align="left"></a>
	    </div>
	   <div style="margin-left:200px; font-size:12px; margin-top:4px; ">Hover To Enlarge</div>  
    </div>

At a guess I'd say it's to do with the target="_blank" part. I just don't know what to change it to.

I'm sure this is a simple fix with an overlooked string somewhere, but I'm so new to HTML I really have no idea how to fix it.




On a side note, the viewer is very clumsy as well - no provision for images of different ratios - it stretches everything to fit its 400x300 format. I'm not overly worried about that, might play with fixing that later if I can work out how.



I'm adapting this format for an ebay ad, just chose to go about it my own way using an online editor I found and trying to get my head around how HTML code works. Learning opportunity


I used to program a bit in Pascal and C++ and became quite adept at it but that was years ago (high school, ~2004) so this is a little different to what I'm used to but once I figure out how HTML handles things and what its limitations are I'm sure I can pick it up quite quickly based on that previous knowledge.


Anyway I digress


Thanks for reading
Sam

 

[87RB30VL]

<div id="mainImage">   
			<a href="http://ebayappreview.com/templates/images/products/amazonkindle.jpg" target="_blank"><img src="http://ebayappreview.com/templates/images/products/amazonkindle.jpg" width="400" height="300" hspace="0" vspace="0" border="0" align="left" name="mainphoto"></a>
		</div>

I'm trying to remember what I learned in school, and what I haven't forgotten in general, but pretty sure that section of code is causing the main image to constantly link to the kindle.jpg pic because if you hover over a different image, and mouse over the main preview, the link is coming up as the kindle.jpg, BUT, if you right click and go to properties, it shows the correct link.

I'm at work atm so Ican't really look into it further but I'll suss it out when I get home

 

[savage1987]

<div id="mainImage">   
			<a rel="nofollow" href="http://ebayappreview.com/templates/images/products/amazonkindle.jpg" target="_blank"><img src="http://ebayappreview.com/templates/images/products/amazonkindle.jpg" width="400" height="300" hspace="0" vspace="0" border="0" align="left" name="mainphoto"></a>
		</div>

I'm trying to remember what I learned in school, and what I haven't forgotten in general, but pretty sure that section of code is causing the main image to constantly link to the kindle.jpg pic because if you hover over a different image, and mouse over the main preview, the link is coming up as the kindle.jpg, BUT, if you right click and go to properties, it shows the correct link.

I'm at work atm so Ican't really look into it further but I'll suss it out when I get home

all good, got it pretty well sorted thanks to a couple of guys here. Still working on optimising / building a builder tool ideas

 

[FstStig]

I use to code my websites back when I was younger in HTML, I learned a lot from this website here. Very easy to understand and make sense of and very easy to navigate the website.

Lissa Explains it All -- HTML Help and Tutorial for Kids

 

[savage1987]

Nice, might have a look through that later. Cheers!

 

[87RB30VL]

I used to design web pages, I would just make them in DreamWeaver, edit a few bits and pieces of the html, and just copy the whole page/s of code onto the host page and bam, done. Dreamweaver is good because what you do on the design page, also translates automatically into html on the code page

 

[Aussie V8]

When I was doing it at uni they suggested if we didn't have our text book with us but had net access to go to w3schools.com. It is a pretty good site with an explanation of everything you need to know to build a validatable (is that even a word?) website. I did have others in my bookmarks but locating ehm right now is difficult cause my bookmarks are not sorted very well.