Código HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Productos .. Comercial Clivema SL</title>
<link rel="stylesheet" type="text/css" href="../style.css">
<link type="image/x-icon" href="../imag/logo.png" rel="shortcut icon"/>
<script language="javascript" src="../jquery-1.6.4.min.js"></script>
<script language="javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
function mainmenu(){
// Oculto los submenus
$(" #nav ul ").css({display: "none"});
// Defino que submenus deben estar visibles cuando se pasa el mouse por encima
$(" #nav li").hover(function(){
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});
$(function(){
$('.imagen_75x75_bombas').mouseover(function(){
var texto = " → "+" "+$(this).attr('title'); //obtenemos el valor del atributo alt
$('#bombas').val(texto); //asignamos el valor del atributo al campo de texto
});
$('.imagen_75x75_bombas').mouseout(function(){ //utilizamos la misma clase pero con otro evento
var vacio1 = " ";
$('#bombas').val(vacio1); //asignamos el valor del atributo al campo de texto
});
$('.imagen_75x75_calefaccion').mouseover(function(){
var texto = " → "+" "+$(this).attr('title'); //obtenemos el valor del atributo alt
$('#calefaccion').val(texto); //asignamos el valor del atributo al campo de texto
});
$('.imagen_75x75_calefaccion').mouseout(function(){ //utilizamos la misma clase pero con otro evento
var vacio1 = " ";
$('#calefaccion').val(vacio1); //asignamos el valor del atributo al campo de texto
});
$('.imagen_75x75_acs').mouseover(function(){
var texto = " → "+" "+$(this).attr('title'); //obtenemos el valor del atributo alt
$('#acs').val(texto); //asignamos el valor del atributo al campo de texto
});
$('.imagen_75x75_acs').mouseout(function(){ //utilizamos la misma clase pero con otro evento
var vacio1 = " ";
$('#acs').val(vacio1); //asignamos el valor del atributo al campo de texto
});
$('.imagen_75x75_solar').mouseover(function(){
var texto = " → "+" "+$(this).attr('title'); //obtenemos el valor del atributo alt
$('#solar').val(texto); //asignamos el valor del atributo al campo de texto
});
$('.imagen_75x75_solar').mouseout(function(){ //utilizamos la misma clase pero con otro evento
var vacio1 = " ";
$('#solar').val(vacio1); //asignamos el valor del atributo al campo de texto
});
});
$(document).ready(
function(){
$('ul#baner1').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '400px'
});
});
</script>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="fuente1">
<tr>
<td height="100" class="productos1 abajo">
<table width="0" border="0" align="right" cellpadding="0" cellspacing="0" class="derecha">
<tr>
<td> </td>
<td><a href="../index.php"><img src="../imag/logo_letras.jpg" alt="logo" width="350" height="90" border="0" /></a></td>
<td><a href="../index.php"><img src="../imag/logo_150x90.jpg" alt="logo" width="150" height="90" border="0" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="40" class="fondo2 blanco izquierda medio">
<div id="menu">
<ul id="nav">
<table width="850" border="0" cellpadding="0" cellspacing="0" class="arriba">
<tr>
<td width="200">
<li><a href="../index.php">Inicio</a></li>
</td>
<td width="125">
<li><a href="productos.php">Productos</a>
<ul class="submenu">
<li><a href="1_productos/calefaccion_elec.php">Calefacción eléctrica</a>
<ul class="subsubmenu">
<li><a href="1_productos/11_calefaccion/ecombi.php">E-Combi</a></li>
<li><a href="1_productos/11_calefaccion/acumuladores.php">Acumuladores de calor</a></li>
<li><a href="1_productos/11_calefaccion/emisores.php">Emisores directos</a></li>
<li><a href="1_productos/11_calefaccion/convectores.php">Convectores</a></li>
<li><a href="1_productos/11_calefaccion/calderas.php">Calderas eléctricas</a></li>
<li><a href="1_productos/11_calefaccion/toalleros.php">Toalleros de baño</a></li>
</ul>
</li>
<li><a href="1_productos/bombascalor.php">Bombas de calor</a>
<ul class="subsubmenu">
<li><a href="11_bombas/11_calefaccion/splits.php">Splits</a></li>
<li><a href="11_bombas/11_calefaccion/aireagua.php">Aire-Agua</a></li>
</ul>
</li>
<li><a href="1_productos/agua.php">Agua caliente sanitaria</a>
<ul class="subsubmenu">
<li><a href="1_productos/11_acs/termos.php">Termos eléctricos</a></li>
<li><a href="1_productos/11_acs/calentadores_instantaneos.php">Calentadores instantaneos</a></li>
<li><a href="1_productos/11_acs/calderasgas.php">Calderas de gas</a></li>
<li><a href="1_productos/11_acs/calentadores_gas.php">Calentadores de gas</a></li>
</ul>
</li>
<li><a href="1_productos/energiasolar.php">Energia solar</a>
<ul class="subsubmenu">
<li><a href="1_productos/11_esolar/equipos.php">Equipos individuales</a></li>
<li><a href="1_productos/11_esolar/paneles.php">Paneles solares</a></li>
<li><a href="1_productos/11_esolar/regulacion.php">Regulación</a></li>
<li><a href="1_productos/11_esolar/acs.php">Acumuladores ACS</a></li>
</ul>
</li>
</ul>
</li>
</td>
<td width="125">
<li><a href="servicios.php">Servicios</a>
<ul class="submenu">
<li><a href="1_servicios/calefaccion.php">Asesoramiento calefacción</a></li>
<li><a href="1_servicios/acs.php">Asesoramiento agua caliente sanitaria</a></li>
<li><a href="1_servicios/bomba.php">Asesoramiento bomba de calor</a></li>
<li><a href="1_servicios/esolar.php">Asesoramiento energía solar</a></li>
</ul>
</li>
</td>
<td width="200">
<li><a href="factura.php">Factura eléctrica</a>
<ul class="submenu">
<li><a href="1_factura/tarifas.php">Tarifas eléctricas</a></li>
<li><a href="1_factura/potencia.php">Potencias de contratación</a></li>
<li><a href="1_factura/factura_tur.php">Factura TUR</a></li>
<li><a href="1_factura/mercado_libre.php">Mercado libre</a></li>
<li><a href="1_factura/claves.php">Claves para elegir la mejor oferta</a></li>
<li><a href="1_factura/comparador.php">Comparador de ofertas</a></li>
<li><a href="1_factura/mifactura.php">Mi factura eléctrica</a>
<ul class="subsubmenu">
<li><a href="1_factura/11_mifactura/entienda.php">Pago lo correcto (Programa)</a></li>
<li><a href="1_factura/11_mifactura/pago.php">Entienda su factura</a></li>
</ul>
</li>
</ul>
</li>
</td>
<td width="100">
<li><a href="contacto.php">Contacto</a></li>
</td>
<td width="350">
<li><a href="acercade.php">Acerca de Comercial Clivema</a></li>
</td>
</tr>
</table>
</ul>
</div>
</td>
</tr>
<tr>
<td height="400" class="productos3">
<table width="0" border="0" cellpadding="0" cellspacing="0" class="centrar">
<tr>
<td> </td>
<td width="500"> </td>
<td> </td>
</tr>
<tr>
<td width="300"> </td>
<td width="500" height="25">Calefacción eléctrica <input name="calefaccion" id="calefaccion" type="text" class="transparente" size="50"/></td>
<td height="25"> </td>
</tr>
<tr>
<td width="300" rowspan="11" class="arriba">
<table width="0" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="300"> </td>
</tr>
<tr>
<td>
<ul id="baner1">
<li><a href="1_factura/comparador.php" target="_parent"><img src="../imag/banners/280X150/comparador.png" width="280" height="150" /></a></li>
<li> <a href="#" target="_parent"><img src="../imag/banners/280X150/registrate.png" width="280" height="150" /></a></li>
<li> <a href="../index.php" target="_parent"><img src="../imag/banners/280X150/entienda.png" width="280" height="150" /></a></li>
</ul>
</td>
</tr>
</table>
</td>
<td width="500" height="150" class="small"><p>Somos distribuidores de las marcas punteras tanto en acumuladores de calor como en calefacción directa y demás sistemas de calefacción.</p>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="#"><img src="../imag/productos/calefaccion/ecombi.jpg" width="75" height="75" class="imagen_75x75_calefaccion" title="E-Combi - Acumulador-Emisor" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/calefaccion/acumuladores.jpg" width="75" height="75" class="imagen_75x75_calefaccion" title="Acumuladores de calor" alt="" /></a><td>
<td><img src="../imag/productos/calefaccion/linea.jpg" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/calefaccion/emisores.jpg" width="75" height="75" class="imagen_75x75_calefaccion" title="Emisores directos" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/calefaccion/convectores.jpg" width="75" height="75" class="imagen_75x75_calefaccion" title="Convectores" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/calefaccion/calderas.jpg" width="75" height="75" class="imagen_75x75_calefaccion" title="Calderas eléctricas" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/calefaccion/toalleros.jpg" width="75" height="75" class="imagen_75x75_calefaccion" title="Toalleros de baño" alt="" /></a></td>
</tr>
</table>
</td>
<td height="150"><img src="../imag/productos/calefaccion_principal.png" width="150" height="150" /></td>
</tr>
<tr>
<td width="500" height="25"> </td>
<td height="25"> </td>
</tr>
<tr>
<td width="500" height="25">Bombas de calor <input name="bombas" id="bombas" type="text" class="transparente" size="50"/></td>
<td height="25"> </td>
</tr>
<tr>
<td width="500" height="150" class="small"><p>La última tecnología en ahorro energético, calor en invierno y frio en verano con el mínimo consumo.
</p>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="170"> </td>
<td width="75"><a href="#"><img src="../imag/productos/bombas_calor/bombasdecalor.jpg" width="75" height="75" class="imagen_75x75_bombas" title="Splits" alt="" /></a></td>
<td width="10"><img src="../imag/productos/calefaccion/linea.jpg" alt="" width="8" height="75" /></td>
<td width="75"><a href="#"><img src="../imag/productos/bombas_calor/aire_agua.jpg"width="75" height="75" class="imagen_75x75_bombas" title="Bombas de calor aire-agua" alt="" /></a></td>
<td width="170"> </td>
</tr>
</table>
</td>
<td height="150"><img src="../imag/productos/bombas_principal.png" alt="" width="150" height="150" /></td>
</tr>
<tr>
<td width="500" height="25"> </td>
<td height="25"> </td>
</tr>
<tr>
<td width="500" height="25">Agua caliente sanitaria <input name="acs" id="acs" type="text" class="transparente" size="50"/></td>
<td height="25"> </td>
</tr>
<tr>
<td width="500" height="150" class="small"><p>Agua caliente para el uso doméstico, ofrecemos una amplia gama de soluciones para cada situación particular.</p>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75"> </td>
<td width="10"> </td>
<td><a href="#"><img src="../imag/productos/agua/termo.jpg" width="75" height="75" class="imagen_75x75_acs" title="Termos eléctricos" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" alt="" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/agua/calentadoresdirectos.jpg" width="75" height="75" class="imagen_75x75_acs" title="Calentadores instantáneos" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" alt="" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/agua/calderagas.jpg" width="75" height="75" class="imagen_75x75_acs" title="Calderas de gas" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" alt="" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/agua/calentador.jpg" width="75" height="75" class="imagen_75x75_acs" title="Calentadores de gas" alt="" /></a></td>
<td width="10"> </td>
<td width="75"> </td>
</tr>
</table>
<p> </p></td>
<td height="150"><img src="../imag/productos/agua_principal.png" alt="" width="150" height="150" /></td>
</tr>
<tr>
<td width="500" height="25"> </td>
<td height="25"> </td>
</tr>
<tr>
<td width="500" height="25">Energia solar <input name="solar" id="solar" type="text" class="transparente" size="50"/></td>
<td height="25"> </td>
</tr>
<tr>
<td width="500" height="150" class="small"><p>Disponemos de la más amplia gama de soluciones en energías renovables y la última tecnología en aprovechamiento energético.</p>
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75"> </td>
<td width="10"> </td>
<td><a href="#"><img src="../imag/productos/solar/equipo.jpg" width="75" height="75" class="imagen_75x75_solar" title="Equipos individuales compactos" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" alt="" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/solar/panel.jpg" width="75" height="75" class="imagen_75x75_solar" title="Paneles solares / Captadores" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" alt="" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/solar/regulacion.jpg" width="75" height="75" class="imagen_75x75_solar" title="Equipos de regulación y control" alt="" /></a></td>
<td><img src="../imag/productos/calefaccion/linea.jpg" alt="" width="8" height="75" /></td>
<td><a href="#"><img src="../imag/productos/solar/acs.jpg" width="75" height="75" class="imagen_75x75_solar" title="Acumuladores ACS" alt="" /></a></td>
<td width="10"> </td>
<td width="75"> </td>
</tr>
</table>
</td>
<td height="150"><img src="../imag/productos/solar_principal.png" alt="" width="150" height="150" /></td>
</tr>
<tr>
<td width="500" height="25"> </td>
<td height="25"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" class="centro fondof2 small">Contacta · Política de Privacidad · Ley de protección de datos · Nosotros · Empleo</td>
</tr>
<tr>
<td height="100" class="derecha medio fondof1 blanco small"> <p>© 2011 Comercial Cilvema SL</p></td>
</tr>
</table>
</body>
</html>y el del .js
Código ActionScript :
(function($) {
$.fn.innerfade = function(options) {
return this.each(function() {
$.innerfade(this, options);
});
};
$.innerfade = function(container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
if (settings.children === null)
var elements = $(container).children();
else
var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
for (var i = 0; i < elements.length; i++) {
$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
};
if (settings.type == "sequence") {
setTimeout(function() {
$.innerfade.next(elements, settings, 1, 0);
}, settings.timeout);
$(elements[0]).show();
} else if (settings.type == "random") {
var last = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function() {
do {
current = Math.floor ( Math.random ( ) * ( elements.length ) );
} while (last == current );
$.innerfade.next(elements, settings, current, last);
}, settings.timeout);
$(elements[last]).show();
} else if ( settings.type == 'random_start' ) {
settings.type = 'sequence';
var current = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function(){
$.innerfade.next(elements, settings, (current + 1) % elements.length, current);
}, settings.timeout);
$(elements[current]).show();
} else {
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
}
}
};
$.innerfade.next = function(elements, settings, current, last) {
if (settings.animationtype == 'slide') {
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
} else if (settings.animationtype == 'fade') {
$(elements[last]).fadeOut(settings.speed);
$(elements[current]).fadeIn(settings.speed, function() {
removeFilter($(this)[0]);
});
} else
alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
if (settings.type == "sequence") {
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
} else if (settings.type == "random") {
last = current;
while (current == last)
current = Math.floor(Math.random() * elements.length);
} else
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
setTimeout((function() {
$.innerfade.next(elements, settings, current, last);
}), settings.timeout);
};
})(jQuery);
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
if(element.style.removeAttribute){
element.style.removeAttribute('filter');
}
}
D 
