Segui le novità su Telegram
04.03.2013
Ecommerce: Javascript e css per gestire hover e active su menu' di div box per cataloghi enormi
Una tecnica complessa per gestire grandi quantita' di prodotti in vendita, che richiede una visualizzazione a blocchi con traccia delle scelte.
Una tecnica evoluta che ho sviluppato sulla base di altri esempi per altre ipotesi.
Lo rilascio qui per gli sviluppatori che vorranno utilizzarla.
L'abbiamo usata in uno store dal catalogo di migliaia di prodotti, da sfogliare con tecniche particolarmente sofisticate.
<!DOCTYPE HTML>
<html>
<head>
<title>Div Background Change</title>
<script language="javascript">
function sel(idi) {
document.getElementById('id1').className = 'hover bbox';
document.getElementById('id2').className = 'hover bbox';
document.getElementById('id3').className = 'hover bbox';
document.getElementById('id4').className = 'hover bbox';
document.getElementById(idi).className = 'hoverChecked bbox';
document.getElementById(idi).onMouseOver = function() { document.getElementById(idi).className += 'hover'; }
}
</script>
<style type='text/css'>
.bbox {display:inline;padding:30px;margin:4px; }
.hover { background:grey;}
.hover:hover { background:green }
.hoverChecked { background:red }
.hoverChecked:hover { background:green }
</style>
</head>
<body onload="sel('id1');">
<div class="hover bbox" id=id1 onclick="sel('id1');" >first</div>
<div class="hover bbox" id=id2 onclick="sel('id2');" >second</div>
<div class="hover bbox" id=id3 onclick="sel('id3');" >third</div>
<div class="hover bbox" id=id4 onclick="sel('id4');" >fourth</div>
</body>
</html>
Segui le novità su Telegram oppure segui il Podcast
Approfondimenti:
