HTML Hover help

__plec__ · 09-03-2012 3:17pm #1

Hi all, designinig a website using a basic serif program (which cost me €8) for the basic template and then using html to make it a little more interesting.

I am having a few problems with my main page which can be viewed here.http://cga.ie

On this page i have 16 thumbnails, which when the mouse hovers over the larger pic will be seen on the box on the right hand side. This i can do. I also want to be able to click on the thumbnail to be taken to the page of that project. Problem is that when i add the link the same pic shows for each thumbnail. To explain this i have set up the page where only the 3 thumbnails on the bottom right have links (you can see that the same pic shows for these 3, while the proper pics show for the rest which have no links).

Originally i just had 16 blank boxes with orange surrounds instead of thumbnail pics, and the hover menu and link worked perfectly. Only since i put in the thumbnail pics has this problem arisen.

Note for simplicity sake i have disabled all the link pages.

I am no HTML expert so im sure there is a simple explaination for the above, i have spent the past 4 hours trying to find a solution but am right back at square one.

All help appreciated

Thank you

tricky D · 09-03-2012 3:29pm

That's a background image not the img declared in the img tag. As far as I can see, you are using '&' in the image name which is the most likely reason it is not displaying. Only use a-z, 0-9, - and _ in file and directory names and no spaces like you have in 'page 15.html'.

diarmuid05 · 09-03-2012 3:37pm

If you slowly hover over the bottom right image from top down....
there seems to be about a pixel at the top that shows a different image. (2nd img on top row)

You seem to be putting some kind of a poly map over the original image, so it's like firing the mouseout and changing the image

diarmuid05 · 09-03-2012 3:49pm

on further investigation...

That 1px where the image is correct is actually linking to 1.html
so here is where you need to make the change. i'm not sure you need that poly map at all.
(depends what you want to do really) but if you just want it to link to a new page, change the corresponding link that currently reads 1.html to the correct ****.html

__plec__ · 09-03-2012 4:18pm

Thank you both.

The only link/image that is working is thumbnail no.15 (3rd on the bottom row). Problem is that this image shows for all the links i have set up (for this example its only the last thumbnails on the 3rd and 4th row)

Diarmuid :-

- the reason the 1.html is there is that the hover menu seems to need <a> tag to work so thats why the following code is used.

"<a href = "1.html"
onMouseOver="Show_Image('Img955');" onMouseOut="Hide_Image('Img955')"> <small>"

Over that i then place a hotspot to the intended page. However this hotspot seems to only display the same pic for all. I know that this can work as before i put the thumbnails in the appropriate hover pic would display, and would also allow the intended link to work too. So not sure why the thumbnail pics seemed to have changed this.

Oh an dont mind the fact that im out by a pixel or two in places, frustration meant that i wasnt very precise in where i put the hotspots and html box, this will be sorted once i know i can get the page working...very well spotted though

Tricky :-

The images for all the thumbnails are working, apart from the 3 mentioned above. the only difference is that these 3 have a link attached to them. The background image is the same as the first thumbnail though so i really dont need that one to have a hover image.

Thanks for your messages, really hope to get this sorted as im so so close to having it finished

Thanks

Giblet · 09-03-2012 4:47pm

The HTML is an absolute mess. You have anchors (<a>) tags which change the image on hover, but in some cases you have multiple images under the same anchor, which is why some images change to the same large image, but all of that pales in comparison to the mess of HTML that's in there, which will make any fixes anyone comes up with useless. You have multiple (nearly 20) open <BODY> tags. Whatever tool you are using to create this is absolutely woeful.

__plec__ · 09-03-2012 5:13pm

Thank you, im no HTML expert im afraid, actually using the word expert is probably an insult

Removed 16 <body> tags, no change but obviously needed to go, thanks.

Problem still there though

Giblet · 09-03-2012 6:55pm

I rewrote some of your page. Unzip this and open the index.html. Browse the source to see all you need. It's just a rush job but you should get why you are having problems.

__plec__ · 09-03-2012 11:04pm

Giblet

Thank you so much for doing that, will go through it soon

Thank you

Lantus · 10-03-2012 12:15am

on a seperate note the page is very wide. Even when I remove my fav bar I still have to scroll left and right. Great for a world where we all own widescreen monitors but I dont live in that world. Maybe consider a liquid page design or fixed at a smaller width (around 900 to 980px is generally the widest to ensure it fits on pretty much any screen.)

__plec__ · 13-03-2012 11:03am

Giblet

Thank you for that, impressed with the simplicity of your HTML, really puts mine to shame...however i've just found out that my (terrible) coding works perfectly in firefox and google chrome, its just in IE where the <a href> isnt working.

I looked over yours for ages to see how i could fit it into my setup but got kinda lost in it. I'll show you how the program im using works. I had tried to build it entirely from html but my boxes etc were all over the place so decided i needed a program just to form the page template

Serif Webplus 7

Box number 2 is where ive put in the code for my main pics, ie.

<a href=" page15.html"
onMouseOut="Hide_Image('Img950')"> <small> </small><BR><small></small></BR> </a>
<span id="Img950" style=" display:none">
<div
style="
top: -10;
left: -10;
position: absolute;
z-index: 1;
visibility: show;"><img src=" 950.jpg "title=" 950.jpg" width="737" height="500" hspace="10" vspace="10" align="left" border="0" /></div></span>

Then for the hover menu i place a 'html box' over the thumbnail with the following code

<a href = "page3.html"
onMouseOver="Show_Image('Img950');" onMouseOut="Hide_Image('Img950')"> <small>

<table border=0 ="opacity:0.4;filter:alpha(opacity=40)"width=90 height=65>
<tr><td></td></tr>
</table>

<div
id="Img950" style="display "> </div>

Lantus - thanks for that, hadnt even thought of it, every computer ive checked it out on has a wide enough screen so it was something that never came up....how does one make a 'liquid' page??

Thank you both

__plec__ · 13-03-2012 11:07am

Sorry image in my last post doesnt seem to work so here it is

Giblet · 13-03-2012 12:23pm

It's going to be difficult to diagnose as it seems your program dumps a lot of bad HTML into the page (are you including html pages inside of html pages?)
I would honestly just try to do it by hand! You'll tear your hair out less and appreciate what you doing. What aspects are you confused by in what I uploaded?

__plec__ · 15-03-2012 4:00pm

Thanks for the help Giblet, have the site working as i want on google chrome & firefox, just that link problem on IE...yeah ran the site through an online HTML diagnostic site and it returned lots of bad html code, only a tiny percentage was mine (alot from the program im using).

When i start inserting my images into your html i get the images up but sometimes alot of text comes with it, and the frames move about...i know im deleting/inserting something wrong, but honestly dont have the time to go through it (im sorry, i do appreciate all your input, its just i really need to get back to my real job, so site will have to suffice as it is for the min, am happy with the front page layout which is important to our business)

Thanks again for your help

Giblet · 15-03-2012 4:05pm

Try editing the HTML file directly, just copy one of the other <img> tags and paste it onto a new line, and change the image name / path to your image

HTML Hover help

Comments