Alt text on mouseover on gauges page

barleywine · Post by **barleywine** » Thu 01 Jan 2009 5:33 pm

Hi,

I have created my own web pages to render my weather station data, using version 1.8.3.539. My gauges page (http://www.warman.org.uk/2Col/gauges.aspx) renders the "alt" text outside of the yellow box. I can't see where I can edit this - is it in one of the javascript files? If it is not possible to fix in the javascript, how can I disable the box altogether and put the data in as part of an "alt" attribute on the image?

TNETWeather · Post by **TNETWeather** » Thu 01 Jan 2009 6:39 pm

I suspect that errors on your page are causing them to not work properly.

The data is showing, just not in the box which suggests that the CSS that controls that is being interfered with.

It is hard to nail down exactly what is causing issues but here are a few things that I noted..

o You have a Character Encoding mismatch in your document. Your HTTP header says utf-8, but your Meta element says iso-8859-1. This can confuse some browsers since they don't know what you really want.
o You have invalid characters at the top of your weatherstyle.css file.
o You have an id tag in your <head> element. I don't think that is legal as there is no CSS allowed in the head section other than defining CSS or making a link to an external CSS file(s)
o Meta tags are not properly formatted and don't have proper endings for XHTML

Code: Select all

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

should be

Code: Select all

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Some of these might be effecting your output, but I suspect that it is more of a CSS conflict.

You would need to check your various CSS files to see if you are overriding the CSS.

As to whether or not you could make them in the Alt (or Title), yes... you would need to reformat the page to do that.

Post by **steve** » Thu 01 Jan 2009 6:42 pm

I've seen a few odd things with those mouseovers, but not that one. It's the boxover.js that does that, I think, so you could look in there to try to fix it. I don't know how you would disable it, other than maybe removing the reference to boxover.js?

Sorry I can't be any more help.

But I see that Kevin has been much more helpful

Steve

barleywine · Post by **barleywine** » Fri 02 Jan 2009 12:10 am

Thanks Kevin and Steve

I will correct the errors Kevin has pointed out, and check my stylesheets.

beteljuice · Post by **beteljuice** » Fri 02 Jan 2009 2:31 am

I think ....

Looking at your 2 col css and the boxover.js, I would guess that the content of the boxes has inherited the 200px left margin of your page 'content' style. (Why hasn't it done this with the box header

and where is the info.gif ?)

In boxover.js try:

Code: Select all

function defBdyStyle() {
dvBdy.style.margin='0px';
dvBdy.style.borderBottom='1px solid #999999';
dvBdy.style.borderLeft='1px solid #999999';
dvBdy.style.borderRight='1px solid #999999';
dvBdy.style.width='150px';
dvBdy.style.fontFamily='Verdana,Arial,Helvetica';
dvBdy.style.fontSize='9px';
dvBdy.style.padding='3px';
dvBdy.style.color='#000055';
dvBdy.style.background='#FFFFCC';
dvBdy.style.filter='alpha(opacity=100)';
dvBdy.style.opacity='1.00';}

The: dvBdy.style.margin='0px'; is an additional line of code.

Although all this div and child creation on-the-fly is beyond my ken

Let us know if it works !

barleywine · Post by **barleywine** » Fri 02 Jan 2009 4:16 pm

Thanks for all this. I will give it a good try over the weekend, and will let you know how I get on. I shall use Firebug to have a good look at what is going on with inheritance in the styles, and tidy up the stylesheets a bit (there is quite a bit of stuff in there which is no longer relevant to the website in its currrent form).

cheers

barleywine · Post by **barleywine** » Sun 04 Jan 2009 4:15 pm

I have got around the problem by:

1. Disabling boxover.js
2. In dashboard.js, commented out all the jgpaint function calls eg:
jg.paint();
// eid.title="header=["+tit+" ("+tempunits+")] body=["+getmo(mo)+"] delay=["+mod+"]";
}
(If jg.paint() isn't disabled, a box containing the header, title, temperature units, body etc is rendered, with all its html.)

3. Created my own "title" attribute for each table cell which contain the gauge images, eg for Outside temperature, wind chill and heat index:

<tr>
<td width="33%" align="center" bgcolor="#EFEFEF" title='Outside temperature: <#temp>C, Trend: <#temptrendtext>'><div id="outsidetemp">small</div></td>
<td width="34%" align="center" bgcolor="#FFFFFF" title='Wind chill: <#wchill>C'><div id="windchill">small</div></td>
<td width="33%" align="center" bgcolor="#EFEFEF" title='Heat index: <#heatindex>C'><div id="heatindex">small</div></td>
</tr>

This renders a not particularly spectacular title on mouseover, which can be populated with any Cumulus tags as required, but gets over the problem I had where I think beteljuice was right pointing out that my 200px margin which is needed for the page to have a side menu was being inherited in the CSS.

Many thanks for all the advice on this

Post by **steve** » Sun 04 Jan 2009 4:33 pm

I think your new mouseovers look fine

Steve

barleywine · Post by **barleywine** » Sun 04 Jan 2009 4:37 pm

Thank you

beteljuice · Post by **beteljuice** » Sun 04 Jan 2009 5:58 pm

Sorry we couldn't do you an 'easy fix', but that's the sort of thing that happens with imported / overlayed styles !

I hate DHTML / css - but I'm an old git who started when the the web was pure text and no graphics support !

PS. Word processors were about 2kb

Cumulus Support

Alt text on mouseover on gauges page

Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page

Re: Alt text on mouseover on gauges page