»
EnglishFrenchVietnamese

Print - Text over Image effect - JavaScriptBank.com

Full version: jsB@nk » Text » Text over Image effect
URL: https://www.javascriptbank.com/text-over-image-effect.html

Text over Image effect © JavaScriptBank.comThis effect can write over image by using div tag.

Full version: jsB@nk » Text » Text over Image effect
URL: https://www.javascriptbank.com/text-over-image-effect.html



CSS
<style type="text/css">.imgHolder {  position:relative;}.imgText {  position:absolute;  left:0; top:0;  width:100px;}</style><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


JavaScript
<script type="text/javascript">window.onload = function(){  var spans = document.getElementsByTagName('SPAN');  for (var i = 0; i < spans.length; ++i) {    spans[i].onmouseover = setText;  }}function setText(){  document.getElementById('txt1').innerHTML = this.innerHTML;}</script><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->


HTML
<div class="imgHolder">  <img src="../image/logojs.gif" width="100">  <div id="txt1" class="imgText">Lorem ipsum dolor sit amet,</div></div><div><span>Lorem ipsum dolor sit amet,</span><span> consectetaur adipisicing elit,</span><span> sed do eiusmod tempor incididunt</span><span> ut labore et dolore magna aliqua.</span></div><!--    This script downloaded from www.JavaScriptBank.com    Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->