Hola y muchas gracias JavierB:
Efectivamente, qué tontería, ese era el archivo.
Lo he metido en el html y me da el resultado de que aparece el botón cubriendo el enlace de texto, aunque con el problema anterior que afecta a IE, consistente en que, al quitar el ratón del botón, no se quita el Over. Aunque es el resultado que se mostraba en Internet.
Por otro lado, lo que antes funcionaba en FF, ahora no, ya que con el pedazo de código que he insertado ni siquiera sale la imagen img.gif
Seguramente será otra tontería como lo anterior de localizar el archivo .css, pero yo no sé cómo solucionarla.
El código ha quedado así:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>lorem ipsum inc</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><br>
<META content="MSHTML 6.00.2800.1555" name=GENERATOR></HEAD>
<style type="text/css">
/*\*//*/
p#principle {
height: 290px;
overflow: visible !important;
}
/**/
body {
margin: 2em 3em;
background: #fff;
color: #000;
font: 1em/1.66 serif;
}
p#principle {
height: 290px;
overflow: hidden;
}
a {
position: relative;
display: block;
width: 100px;
height: 50px;
}
a span {
position: absolute;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background-image: url(How to create a CSS rollover link_files/img.gif);
background-repeat: no-repeat;
background-position: 0% 0%;
}
a:focus span,
a:hover span {
background-position: 0% 100%;
}
</style></head><body>
<h1>How to create a CSS rollover link</h1>
<hr>
<h2>The CSS rollover link:</h2>
<p><a href="http://test.newplasticarts.co.uk/css-rollover/">Link Text<span></span></a></p>
<hr>
<h2>The image:</h2>
<p><img src="How%20to%20create%20a%20CSS%20rollover%20link _files/img.gif" alt="" height="100" width="100"></p>
<hr>
<h2>The principle:</h2>
<p id="principle"><img src="How%20to%20create%20a%20CSS%20rollover%20link _files/css_rollover.gif" alt="How to create a CSS rollover link." height="668" width="630"></p>
<hr>
<h2>The explanation:</h2>
<ul>
<li>The <code>anchor</code> is given a certain size.</li>
<li>The <code>span</code> is set to fill the area of the <code>anchor</code> and positioned directly over the <code>anchor</code> area.</li>
<li>The <code>background-image</code> in the <code>span</code> element obscures the HTML text beneath it.</li>
<li>When the <code>anchor</code> <em>is not</em> being focused or hovered over, the <code>background-image</code> in the <code>span</code> element is positioned so that the 'off' area is showing.</li>
<li>When the <code>anchor</code> <em>is</em> being focused or hovered over, the <code>background-image</code> in the <code>span</code> element is positioned so that the 'over' area is showing.</li>
</ul>
<p>Additional states can be added to the image, such as 'visited' and 'active'.<br>
Adding additional states may require you to adjust the background-position values for all states in the CSS.</p>
<hr>
<h2>The markup:</h2>
<pre><code><a href="...">Link text<span></span></a></code></pre>
<hr>
<h2>The CSS:</h2>
<pre><code>a {
position: relative;
display: block;
height: 100px;
width: 200px;
}
a span {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 10;
background-image: url(How to create a CSS rollover link_files/img.gif);
background-repeat: no-repeat;
background-position: 0% 0%;
}
a:focus span,
a:hover span {
background-position: 0% 100%;
}</code></pre>
<hr>
</BODY></HTML>
¿Me podrías decir dónde está el error?
Además, ¿hay forma de solucionar la falta de funcionalidad en IE? Ello es esencial, ya que, de otro modo, no interesa este sistema.
Gracias y perdona por mi incompetencia.