I try to change background-image in a table cell when you shift over the cell with the mouse.
In Opera and Mozille the effect was like I thought about. In IE the effect was not there. Knows anybody why?
I wrote a stylesheet file:
td.navi{
background : url(../images/navi/menu1.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10;
}
td.navi:hover{
background : url(../../hill-hoppers/images/navi/menuover.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12;
}
In the HTML file I wrote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title of doc</title>
<meta http-equiv="content-type" content="text/html">
<meta http-equiv="charset" content="windows-1252">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"../css/navi_styles.css" rel="stylesheet" type="text/css">
</head>
<body background="../backgrounds/yellow_stucco.gif" onload="MM_preloadImages("../images/navi/menu1.png","../../hill-hoppers/images/navi/menuover.png")">
<table width="100" border="0" cellspacing="0" cellpadding="0" align="left" summary="Navigation der Site">
<tr valign="middle">
<td class="navi" width="100" height="20" colspan="0" rowspan="0">
Navigation
</td>
</tr>
</table>
</body>
</html>Try putting quotes around the file name in the CSS.@gil davis
thanks, but didn't help.
AndyAccording to <!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/hover.asp">http://msdn.microsoft.com/workshop/auth ... /hover.asp</a><!-- m --> , the "hover" pseudo-class only applies to the <A> tag.@gil davis
thanks, I see.
But do you know, is this css standard that this pseudo classes only applies to the <A> tag or is this IE sh... standard?
AndyDid you even look at the link?
From <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#x33">http://www.w3.org/TR/REC-CSS2/selector.html#x33</a><!-- m --> -
CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.thanks a lot. It is in my bookmarks now. AndyFirst, add this to your stylesheet:
td.navi.over{
background : url(../../hill-hoppers/images/navi/menuover.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12;
}
Then add an id to your table cell:
<td class="navi" id="myCell" width="100" height="20" colspan="0" rowspan="0">
To wrap it up, add this little Javascript to the head of your page:
<script type="text/javascript">
setupMouseOver = function() {
if( document.all && document.getElementById ) {
myElement = document.getElementById( "myCell" );
myElement.onmouseover = function() {
this.className += " over";
} // myElement mouseOver
myElement.onmouseout = function() {
this.className = this.className.replace( " over", "" );
} // myElement mouseOut
} // IE check
} // setupMouseOverList
window.onload = setupMouseOver;
</script>
I tested it locally on my comptuer with Internet Explorer and it worked fine, so it should work for you!thanks @ jish,
I try to do a rollover without java script. When somebody disabled java script on his computer my rollover will not appear.
AndyLike this, maybe (See attachment)?@ Paul jr.
exactemont, thanks.
I tried something like this. One problem I had, I want that when I clicked on a button this is active or has focus, so I want that the button keep has an other color. Like:
li a:hover {
color:red;
background:url(button1) no-repeat #818181;
}
li a:active li a:focus {
color:aqua;
background:url(button2) no-repeat #818181;
}
But it didn't work.
AndyIf I understand you correctly, you want to have the change occur when you click the button, and, you want it to stay like that?
I'm not exactly sure how to do this, except by manually applying a different class to the particular link...
But that won't have it stay changed after you click on it...Exactly,
The problem is, I saw a solution on a website. The have on every site another li-tag with ID "current".
But when I want the navigation in a separate frame this solution does not work.
AndyWhat that is, is they have a certain style which is applied to the link which corresponds with the page you are on. This will not work with a navigation which is in a separate frame. The only way I can think of doing what you want, in the conditions you specify, is with JavaScript.yes, that's my speak. But I'm lokking for a solution without java script. Because, when java script is not aktivated, then your soveli effect is gone...
So I only want use java script for a goodie effect not for a effect I need for main functions
AndyCheck out this thread: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=21898">http://forums.webdeveloper.com/showthre ... adid=21898</a><!-- m -->. It's all about rollovers without JavaScript.
Cheers, Jochem
In Opera and Mozille the effect was like I thought about. In IE the effect was not there. Knows anybody why?
I wrote a stylesheet file:
td.navi{
background : url(../images/navi/menu1.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 10;
}
td.navi:hover{
background : url(../../hill-hoppers/images/navi/menuover.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12;
}
In the HTML file I wrote:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>title of doc</title>
<meta http-equiv="content-type" content="text/html">
<meta http-equiv="charset" content="windows-1252">
<link href=http://www.webdeveloper.com/forum/archive/index.php/"../css/navi_styles.css" rel="stylesheet" type="text/css">
</head>
<body background="../backgrounds/yellow_stucco.gif" onload="MM_preloadImages("../images/navi/menu1.png","../../hill-hoppers/images/navi/menuover.png")">
<table width="100" border="0" cellspacing="0" cellpadding="0" align="left" summary="Navigation der Site">
<tr valign="middle">
<td class="navi" width="100" height="20" colspan="0" rowspan="0">
Navigation
</td>
</tr>
</table>
</body>
</html>Try putting quotes around the file name in the CSS.@gil davis
thanks, but didn't help.
AndyAccording to <!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/hover.asp">http://msdn.microsoft.com/workshop/auth ... /hover.asp</a><!-- m --> , the "hover" pseudo-class only applies to the <A> tag.@gil davis
thanks, I see.
But do you know, is this css standard that this pseudo classes only applies to the <A> tag or is this IE sh... standard?
AndyDid you even look at the link?
From <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/selector.html#x33">http://www.w3.org/TR/REC-CSS2/selector.html#x33</a><!-- m --> -
CSS doesn't define which elements may be in the above states, or how the states are entered and left. Scripting may change whether elements react to user events or not, and different devices and UAs may have different ways of pointing to, or activating elements.thanks a lot. It is in my bookmarks now. AndyFirst, add this to your stylesheet:
td.navi.over{
background : url(../../hill-hoppers/images/navi/menuover.png);
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 12;
}
Then add an id to your table cell:
<td class="navi" id="myCell" width="100" height="20" colspan="0" rowspan="0">
To wrap it up, add this little Javascript to the head of your page:
<script type="text/javascript">
setupMouseOver = function() {
if( document.all && document.getElementById ) {
myElement = document.getElementById( "myCell" );
myElement.onmouseover = function() {
this.className += " over";
} // myElement mouseOver
myElement.onmouseout = function() {
this.className = this.className.replace( " over", "" );
} // myElement mouseOut
} // IE check
} // setupMouseOverList
window.onload = setupMouseOver;
</script>
I tested it locally on my comptuer with Internet Explorer and it worked fine, so it should work for you!thanks @ jish,
I try to do a rollover without java script. When somebody disabled java script on his computer my rollover will not appear.
AndyLike this, maybe (See attachment)?@ Paul jr.
exactemont, thanks.
I tried something like this. One problem I had, I want that when I clicked on a button this is active or has focus, so I want that the button keep has an other color. Like:
li a:hover {
color:red;
background:url(button1) no-repeat #818181;
}
li a:active li a:focus {
color:aqua;
background:url(button2) no-repeat #818181;
}
But it didn't work.
AndyIf I understand you correctly, you want to have the change occur when you click the button, and, you want it to stay like that?
I'm not exactly sure how to do this, except by manually applying a different class to the particular link...
But that won't have it stay changed after you click on it...Exactly,
The problem is, I saw a solution on a website. The have on every site another li-tag with ID "current".
But when I want the navigation in a separate frame this solution does not work.
AndyWhat that is, is they have a certain style which is applied to the link which corresponds with the page you are on. This will not work with a navigation which is in a separate frame. The only way I can think of doing what you want, in the conditions you specify, is with JavaScript.yes, that's my speak. But I'm lokking for a solution without java script. Because, when java script is not aktivated, then your soveli effect is gone...
So I only want use java script for a goodie effect not for a effect I need for main functions
AndyCheck out this thread: <!-- m --><a class="postlink" href="http://forums.webdeveloper.com/showthread.php?s=&threadid=21898">http://forums.webdeveloper.com/showthre ... adid=21898</a><!-- m -->. It's all about rollovers without JavaScript.
Cheers, Jochem