Dhtml - Immagine riflessa

Immagine riflessa

Questa demo permette di creare un effetto "mirror" dell'immagine che, grazie ad HTML dinamico, viene riprodotto orizzontalmente in modo inverso. Molti problemi grafici sono in questo modo risolti.

il codice da inserire nella tua pagina

<STYLE TYPE="text/css">
#text {
POSITION: absolute;
Z-INDEX: 1;
width: 240;
LEFT: 400px;
TOP: 5px;}
</style>

</HEAD>

<script type="text/javascript" src="https://i5.plug.it/cmp/iub_conf_libero.js"></script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/tcf/stub-v2.js"></script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
    
    
    <script src='https://i5.plug.it/cmp/qciol.min.js' async="true"></script>
	
	
<script src="//barra-spazio.libero.it/x/js/barra_n04_siti.js?ver=1" type="text/javascript" language="Javascript"></script>

Libero.Stash.HF = { version: '8.3.04', cksrv: { a: 'HF8.3.04', b: 'digilander' } };

</script>

<!--[if lte IE 7]>
	<style>
	#lh_header_top #HF_login_l, #lh_header_top #HF_login_r { 
		float: none;
	}
	#lh_header_top {
		left: 0px;
	}
	
	#l_header_topbar #l_header_topbar_popup_altro, #l_header_topbar #l_header_topbar_popup_opzioni {
    	margin-top: 33px;
	}
	#l_header_topbar #l_header_topbar_popup_nicknames {
    	margin-top: 25px;
	}

</style>
<![endif]-->
<style>
	#lh_header #lh_area02a{
		position:relative;
		overflow: visible;
		height: 30px;
	}
	
	#lh_header #lh_area02b{
		z-index: -1;
	}
	#lh_header #lh_area02a .lh_pos {
		position: absolute;
		margin-bottom: 0;
	}
	
	#lh_header #lh_area02a .lh_on {
	}
	#lh_header .lh_finput_area input {
		height: 27px;
		padding-top: 0;
		padding-bottom: 0;
		line-height: 27px !important;
		font-size: 15px !important;
	}
	#lh_altro{
		position: relative !important;
	}
	#lh_header_top .lh_popup {
	}
	#lf_footer .lf_finput_area input {
		font-size: 12px !important;
		line-height: 25px !important;
		vertical-align: middle;
		padding: 0 !important;
		margin: 0 !important;
	}
	
</style>

// Run on load
	Libero.HF.adjust800(Libero.Stash.extractSummary);
	
	// Add onresize handlers 
	if ( window.addEventListener ) {
		window.addEventListener('resize', function() { Libero.HF.adjust800(Libero.Stash.extractSummary) }, 1);
	} 
	else if (window.attachEvent) {
		window.attachEvent('onresize', function() { Libero.HF.adjust800(Libero.Stash.extractSummary) });
	}
-->
</script>

<link rel="preconnect" href="https://tags.crwdcntrl.net">         
<link rel="preconnect" href="https://bcp.crwdcntrl.net">         
<link rel="dns-prefetch" href="https://tags.crwdcntrl.net">         
<link rel="dns-prefetch" href="https://bcp.crwdcntrl.net">
<script type='text/javascript' src='https://www.iolam.it/js/iam2.0.js?ns=libero/web/community/siti/1.2' async></script>

<div id="ad72890top" align="center"></div>

<IMG SRC="quadro.jpg" WIDTH=320 HEIGHT=240 BORDER=0><br>
Immagine normale
<p>
<div class=coffee style="width: 200; filter: fliph">

</div><br>
Immagine invertita orizzontalmente

<div id="text">
<BR><BR><BR><BR><BR><BR><BR>
Questa demo permette di creare un effetto "mirror" dell'immagine che, grazie a HTML dinamico, viene riprodotto orizzontalmente in modo inverso.<BR>
Molti problemi grafici sono in questo modo risolti.<BR>

<div id="ad72890bottom" align="center"></div> 

<SCRIPT LANGUAGE="Javascript">

</SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="http://digilander.libero.it/_ad/digi_ad_13.js">
</SCRIPT>

<script>
if(window.location === window.parent.location){    
  // Static Queue Snippet
  ! function(t, n) {
      t[n] = t[n] || {
          nlsQ: function(e, o, c, r, s, i) {
              return s = t.document, r = s.createElement("script"), r.async = 1, r.src =
                  ("http:" === t.location.protocol ? "http:" : "https:") + "//cdn-gl.imrworldwide.com/conf/" +
                  e + ".js#name=" + o + "&ns=" + n, i = s.getElementsByTagName("script")[0],
                  i.parentNode.insertBefore(r, i), t[n][o] = t[n][o] || {
                      g: c || {},
                      ggPM: function(e, c, r, s, i) {
                          (t[n][o].q = t[n][o].q || []).push([e, c, r, s, i])
                      }
                  }, t[n][o]}}}
  (window, "NOLBUNDLE");

// SDK Initialization
  var nSdkInstance = NOLBUNDLE.nlsQ("P1504C48C-9D0B-4ADE-B7CD-04AF56A52362", "nlsnInstance");
  // Content Metadata 
  var nielsenMetadata = {
      type: 'static', 
      assetid: (  location.hostname + location.pathname + location.search ).replace( /([^\w]|_)+/g, '-' ).replace( /^-+|-+$/g, '' ) || 'homepage',
      section: 'LiberoCommunity_BRW' 
  };

// Event 'staticstart' Call
  nSdkInstance.ggPM("staticstart", nielsenMetadata);    
}
</script>

<script type="text/javascript">
if ( rs_DLRERR == 1 ) {
var libero_comscore_error = 404;
}
</script>
<script type="text/javascript">
	document.write(unescape("%3Cscript src='" + (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
if (rs_DLR) {
	document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_digilander.libero.it.js'%3E%3C/script%3E"));
	document.write(unescape("%3Cscript id='libero_tracking_js_site' src='http://digistatic.libero.it/js/comscore_8_3_04/comscore_engine.js'%3E%3C/script%3E"));
	
}
</script>
<noscript>
	<img src="http://b.scorecardresearch.com/p?c1=2&c2=13259779&cj=1&name=libero.others&ns_site=libero" />	
</noscript>

<script src="//i.plug.it/iplug/js/lib/iol/analytics/data/digilander-libero-it/tracking_digilander-libero-it.min.js"></script>
<script src="//i.plug.it/iplug/js/lib/iol/analytics/engine/IOL.Analytics.Tracking.min.js"></script>
<script type="text/javascript">
var iat = new IOL.Analytics.Tracking.Engine();
iat.send();
</script>
<noscript><img src="//italiaonline01.wt-eu02.net/215973748390194/wt.pl?p=315,libero.web.share.digiland.siti.digilander&cg1=libero&cg2=web&cg3=share&cg4=digiland&cg5=siti&cg6=digilander&cg7=libero.web.share.digiland.siti.digilander" height="1" width="1" alt=""></noscript>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-9K5Y6YYGV4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-9K5Y6YYGV4');
</script>

Immagine normale

Immagine invertita orizzontalmente

E' vietata la riproduzione anche solo parziale di immagini, icone, layout e contenuti senza previa autorizzazione.
I marchi, i loghi e i prodotti citati sono dei legittimi proprietari.