In a div I use as a menu item, there is a background image and a background colour. The image is a partially transparent mask for the background colour to shine through. But I change the background colour on rollover. The problem is, every time I change it, the browser loads the background image fresh.
Is there a solution not involving the addition of more elements?Post your code.Menu item:<div class="div-menu-item"
...event handlers...>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"sdf.cgi?home" id="link-home">Home</a>
</div>
Note: this is a div with a link inside it. If JavaScript is enabled, it will highlight on rollover and a click anywhere within it will take you to the destination. If JavaScript is disabled, the link is clickable, though no highlighting happens. If there is no CSS, the link will still be there.
These are the CSS declarations
IV.div-menu-item {
background-color: #004000;
background-image: url("d12.png");
...other declarations...}The image d12.png is partially transparent. On rollover the image is reloaded. I.e. - dynamic change forces reload.Why did you cut out the Javascript from the code? That could possible answer the issue.
Also do you only have one linke per div?
In that case you can drop JavaScript all togheter and make the colorchange with only CSS.when I said "post your code". There's no "code" there, just styles.
On rollover the image is reloaded. I.e. - dynamic change forces reload.
Then don't do that. You shouldn't have to reload the bg image to change the bg color.
... onmouseover="this.style.backgroundColor='#FF6FFF'" onmouseout="this.style.backgroundColor='#004000'" ...I shall make a better job of posting code this time.
Here is the code at
<!-- m --><a class="postlink" href="http://newsdf.tripod.com/webforum/onebutton.html">http://newsdf.tripod.com/webforum/onebutton.html</a><!-- m -->
Sorry about the popup ad, I could remove it at the expense of the body tag (take that tripod), but then it wouldn't validate. The page only has one button (except for the ads), with all the code that's related.
Now I decided to make the button as much CSS-dependant as possible, but I would still like to know if this earlier stuff works.
What happens is: the user hovers over the div and this makes the link change colour, even if it is not being hovered over itself (I did this with JavaScript, but now I realise I could specify width and height of the <a> explicitly).
Ok, also some info appears in an info box (not included in the page above), so I used JavaScript for that, but I now also realise this is CSS-possible.
Besides help with the JavaScript, any CSS-conversion and optimization ideas?Originally posted by King Pellinore
In a div I use as a menu item, there is a background image and a background colour. The image is a partially transparent mask for the background colour to shine through. But I change the background colour on rollover. The problem is, every time I change it, the browser loads the background image fresh.
I've now tested your code in Gecko, IE 6.01 and Opera 7b2.
Neither of them reload the image for me, they just seem to change the background as you would like.
Is it a special browser and version you are having problems with?
the user hovers over the div and this makes the link change colour, even if it is not being hovered over itself (I did this with JavaScript, but now I realise I could specify width and height of the <a> explicitly).
Remeber you need to make it display:block also to adhere to the height and width
This is an update on my progress to make a button that works in the major browsers. I posted the previous post in another thread (oh).
The test page is here
<!-- m --><a class="postlink" href="http://newsdf.tripod.com/webforum/onebutton.html">http://newsdf.tripod.com/webforum/onebutton.html</a><!-- m -->
Altogether, I've tried several things, including:
Just changing the background colour on an element (using first JavaScript and then CSS only)
Having two elements, one over the other, changing background colour of one (having the background image on the other).
Having two elements, one contains the background colour+image combination for the highlight state, the other -- for the normal state. I don't change the background properties on the fly anymore, but I do show/hide the two elements. I did several trials with this, including making use of 'display' property, 'top' and 'left' with absolute positioning, ('z-index' method didn't work), expanding the margin of one element on rollover, etc.
All of the buttons work on Mozilla.
All of the buttons have their background redrawn, when you slide your mouse off them and this means that my Ie reloads the images, which takes time. (source of annoyment)
Some of the attempts work on Opera.
This is the final statement of my study:
Whenever Ie shows a box, which has a background image on it, whether this is when the page loads or at a later time (eg. when DHTML is used to display all or part of the box), Ie will redraw the box, reloading the background and there's nothing I can do about it.
I will now try to make it work with the img element. But it will be WRONG.Originally posted by King Pellinore
All of the buttons have their background redrawn, when you slide your mouse off them and this means that my Ie reloads the images, which takes time. (source of annoyment)
[/B]
Hmm, I still don't see that problem with IE here.
Can it possibly be that you have set IE to ALWAYS force a reload in the cashe settings?
If not, you should still be able to fix this by preloading the image (eg put <img style="position:absolute; left:-2000px;" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"yourimage"> last in the document)Yes. Caching is the problem here, as I have found.
To recreate the problem, in Ie on windows, go to Tools|Internet Options|General|Temporary Internet files |Settings
Option Buttons:
Check for newer versions of stored pages:
Every visit to the page
Every time you start Internet Explorer
Automatically
Never
If the first one is set, my problem occurs. For the other ones, my problem is gone.
What I see: images disappear, icon in the corner starts rotating, modem sends something, images reappear.
I though that Ie reloaded the images, but now I realise that it only checked for newer versions and then, finding none, loaded the images from cache. I veryfied this by using a very large image and it took the same amount of time to reappear as the small images.
This also happens on all the DHTML pages that preload images by storing them to cache. If such a page uses javascript, for example, and on mouseover changes a src attribute of an <img>, Ie will look up the image and only after that load it from the cache. Many of the rollovers I see take ages to load - like a second after I mousedover.
If not, you should still be able to fix this by preloading the image (eg put <img style="position:absolute; left:-2000px;" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"yourimage"> last in the document)No, Stefan, unfortunately this doesn't work. I did get my desired behaiviour with using the <img> to go over the <a> (it is the last button on the page), but the buttons above still have their background reloaded.
This is not good.
I know that for me everything will be fixed if I change the options, but there may be many others, who have the same options set as me, or worse, no cache. Therefore, some workaround must be employed for image mouseovers.
I suggest doing what Stefan has said, but for <img> buttons. (It doesn't work with backgrounds)
Is there a solution not involving the addition of more elements?Post your code.Menu item:<div class="div-menu-item"
...event handlers...>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"sdf.cgi?home" id="link-home">Home</a>
</div>
Note: this is a div with a link inside it. If JavaScript is enabled, it will highlight on rollover and a click anywhere within it will take you to the destination. If JavaScript is disabled, the link is clickable, though no highlighting happens. If there is no CSS, the link will still be there.
These are the CSS declarations
IV.div-menu-item {background-color: #004000;
background-image: url("d12.png");
...other declarations...}The image d12.png is partially transparent. On rollover the image is reloaded. I.e. - dynamic change forces reload.Why did you cut out the Javascript from the code? That could possible answer the issue.
Also do you only have one linke per div?
In that case you can drop JavaScript all togheter and make the colorchange with only CSS.when I said "post your code". There's no "code" there, just styles.
On rollover the image is reloaded. I.e. - dynamic change forces reload.
Then don't do that. You shouldn't have to reload the bg image to change the bg color.
... onmouseover="this.style.backgroundColor='#FF6FFF'" onmouseout="this.style.backgroundColor='#004000'" ...I shall make a better job of posting code this time.
Here is the code at
<!-- m --><a class="postlink" href="http://newsdf.tripod.com/webforum/onebutton.html">http://newsdf.tripod.com/webforum/onebutton.html</a><!-- m -->
Sorry about the popup ad, I could remove it at the expense of the body tag (take that tripod), but then it wouldn't validate. The page only has one button (except for the ads), with all the code that's related.
Now I decided to make the button as much CSS-dependant as possible, but I would still like to know if this earlier stuff works.
What happens is: the user hovers over the div and this makes the link change colour, even if it is not being hovered over itself (I did this with JavaScript, but now I realise I could specify width and height of the <a> explicitly).
Ok, also some info appears in an info box (not included in the page above), so I used JavaScript for that, but I now also realise this is CSS-possible.
Besides help with the JavaScript, any CSS-conversion and optimization ideas?Originally posted by King Pellinore
In a div I use as a menu item, there is a background image and a background colour. The image is a partially transparent mask for the background colour to shine through. But I change the background colour on rollover. The problem is, every time I change it, the browser loads the background image fresh.
I've now tested your code in Gecko, IE 6.01 and Opera 7b2.
Neither of them reload the image for me, they just seem to change the background as you would like.
Is it a special browser and version you are having problems with?
the user hovers over the div and this makes the link change colour, even if it is not being hovered over itself (I did this with JavaScript, but now I realise I could specify width and height of the <a> explicitly).
Remeber you need to make it display:block also to adhere to the height and width
This is an update on my progress to make a button that works in the major browsers. I posted the previous post in another thread (oh).The test page is here
<!-- m --><a class="postlink" href="http://newsdf.tripod.com/webforum/onebutton.html">http://newsdf.tripod.com/webforum/onebutton.html</a><!-- m -->
Altogether, I've tried several things, including:
Just changing the background colour on an element (using first JavaScript and then CSS only)
Having two elements, one over the other, changing background colour of one (having the background image on the other).
Having two elements, one contains the background colour+image combination for the highlight state, the other -- for the normal state. I don't change the background properties on the fly anymore, but I do show/hide the two elements. I did several trials with this, including making use of 'display' property, 'top' and 'left' with absolute positioning, ('z-index' method didn't work), expanding the margin of one element on rollover, etc.
All of the buttons work on Mozilla.
All of the buttons have their background redrawn, when you slide your mouse off them and this means that my Ie reloads the images, which takes time. (source of annoyment)
Some of the attempts work on Opera.
This is the final statement of my study:
Whenever Ie shows a box, which has a background image on it, whether this is when the page loads or at a later time (eg. when DHTML is used to display all or part of the box), Ie will redraw the box, reloading the background and there's nothing I can do about it.
I will now try to make it work with the img element. But it will be WRONG.Originally posted by King Pellinore
All of the buttons have their background redrawn, when you slide your mouse off them and this means that my Ie reloads the images, which takes time. (source of annoyment)
[/B]
Hmm, I still don't see that problem with IE here.
Can it possibly be that you have set IE to ALWAYS force a reload in the cashe settings?
If not, you should still be able to fix this by preloading the image (eg put <img style="position:absolute; left:-2000px;" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"yourimage"> last in the document)Yes. Caching is the problem here, as I have found.
To recreate the problem, in Ie on windows, go to Tools|Internet Options|General|Temporary Internet files |Settings
Option Buttons:
Check for newer versions of stored pages:
Every visit to the page
Every time you start Internet Explorer
Automatically
Never
If the first one is set, my problem occurs. For the other ones, my problem is gone.
What I see: images disappear, icon in the corner starts rotating, modem sends something, images reappear.
I though that Ie reloaded the images, but now I realise that it only checked for newer versions and then, finding none, loaded the images from cache. I veryfied this by using a very large image and it took the same amount of time to reappear as the small images.
This also happens on all the DHTML pages that preload images by storing them to cache. If such a page uses javascript, for example, and on mouseover changes a src attribute of an <img>, Ie will look up the image and only after that load it from the cache. Many of the rollovers I see take ages to load - like a second after I mousedover.
If not, you should still be able to fix this by preloading the image (eg put <img style="position:absolute; left:-2000px;" alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"yourimage"> last in the document)No, Stefan, unfortunately this doesn't work. I did get my desired behaiviour with using the <img> to go over the <a> (it is the last button on the page), but the buttons above still have their background reloaded.
This is not good.
I know that for me everything will be fixed if I change the options, but there may be many others, who have the same options set as me, or worse, no cache. Therefore, some workaround must be employed for image mouseovers.
I suggest doing what Stefan has said, but for <img> buttons. (It doesn't work with backgrounds)