|
|
Posted by Jonathan N. Little on 11/28/07 21:21
Brynn wrote:
> On Nov 28, 11:36 am, "Paul" <orelieteNOS...@NOSPAMtiscali.it> wrote:
>> May I obtain the above effect using Frontpage or writing codes in html?
>>
>> Have you some code or some link for me to test? Thanks
>>
>> Paul
>
> Here is a nice lesson with CSS, Javascript, and Html. Just copy
> everything below into a file and play.
This is not a particularly good example in many ways. Firstly it
requires JavaScript. This done be done is CSS for modern browsers and a
Bit of special MS JScript in MS's special HTC file for IE's lack of CSS
support.
>
>
> <html><body>
>
>
> <!--
> The CSS
> We will make 2 different "classes" ... one with the first style ..
> then one with the mouse over style.
> -->
theStyle1 & theStyle2 are bad names for Classes
> <style type="text/css">
> .theStyle1, .theStyle2 {font: bold 10pt verdana; padding: 4px;}
^^^ ^^^^^^^^
Points are for printing not display and Verdana is M$ only and you did
not specify a generic family so for non-M$ systems a *serifed* fallback.
If you want a shortcut, then only specify a generic font family.
> .theStyle1 {background-color: #E3EEE2; color: black;}
> .theStyle2 {background-color: #0E4E07; color: white;}
> </style>
>
>
> <!-- Now the button -->
> <input type="button" class="theStyle1" value="Test Button"
> onMouseOver="this.className='theStyle2';"
> OnMouseOut="this.className='theStyle1';">
>
>
> </body></html>
Also this would not address keyboard only interaction. Here is how you
could do it with CSS and add support. Now MSIE7 does support :hover
pseudo class on non-links but not :focus so you still need the HTC hack
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Better</title>
<style type="text/css">
..trickedOut { font: bold 100% sans-serif; padding: .25em; color: #000;
background-color: #E3EEE2; }
..trickedOut:hover,
..trickedOut:focus {color: #fff; background-color: #0E4E07; }
/* MSIE6 hack via 'MS behavior' and HTC file attached to element*/
..trickedOut { behavior: url(IEFixes.htc) }
/* MSIE special classes .hover & .focus for pseudo classes */
..trickedOut.hover,
..trickedOut.focus { color: #fff; background-color: #0E4E07; }
</style>
</head>
<body>
<input type="button" class="trickedOut" value="Test Button">
</body>
</html>
And you need the HTC file "IEFixes.htc". I've modified it a bit over the
years:
<public:component>
// For MSIE use JScript to attach JS functions to compensate
// for missing pseudo-class support
// from Vladdy http://www.vladdy.net/Demos/IEPseudoClassesFix.html
// updated for html4.01 jnl 3/06
// added focus|blur jnl 5/07
<public:attach event="onmouseover" onevent="DoHover()">
<public:attach event="onmouseout" onevent="RestoreHover()">
<public:attach event="onmousedown" onevent="DoActive()">
<public:attach event="onmouseup" onevent="RestoreActive()">
<public:attach event="onfocus" onevent="DoFocus()">
<public:attach event="onblur" onevent="RestoreFocus()">
<script type="text/jscript">
function DoHover(){
element.className += ' hover';
}
function DoActive(){
element.className += ' active';
}
function DoFocus(){
element.className += ' focus';
}
function RestoreHover(){
element.className = element.className.replace(/\shover\b/,'');
}
function RestoreActive(){
element.className = element.className.replace(/\sactive\b/,'');
}
function RestoreFocus(){
element.className = element.className.replace(/\sfocus\b/,'');
}
</script>
</public:component>
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
Navigation:
[Reply to this message]
|