Đổi ảnh khi rê chuột

[JavaScriptBank]

Hiệu ứng tạo một trình diễn ảnh (http://www.javascriptbank.com/javascript/image/slideshow/) khi ta rê con trỏ chuột (http://www.javascriptbank.com/javascript/mouse/) đến các liên kế... chi tiết (http://www.javascriptbank.com/javascript/link/) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)


http://www.javascriptbank.com/javascript.images/image/onmouseover-slideshow.jpg (http://www.javascriptbank.com/javascript/image/slideshow/onmouseover-slideshow/preview/vi/)
Demo: JavaScript Đổi ảnh khi rê chuột (http://www.javascriptbank.com/onmouseover-slideshow.html/vi/)
| JavaScript OnMouseover Slideshow (http://www.javascriptbank.com/onmouseover-slideshow.html)

[U]Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

<script>

function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("logojs.gif","photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg")
</script>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->


Bước 2: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML

<a href="" onMouseover="changeimage(myimages[0],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[1],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[2],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[3],this.href)">JavaScriptBank.com</a><br>
<a href="" onMouseover="changeimage(myimages[4],this.href)">JavaScriptBank.com</a><br>
<a href="javascript:warp()"><img src="logojs.gif" name="targetimage" border=0></a>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->




Đoạn mã tương tự
- Ẩn/hiện khi rê chuột (http://www.javascriptbank.com/rollover-text-hide-and-show.html/vi/)
- Popup khi rê chuột khỏi nội dung (http://www.javascriptbank.com/popup-on-mouseout-index.html/vi/)
- Đổi ảnh khi rê chuột (http://www.javascriptbank.com/simple-swap.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Hình ảnh (http://www.javascriptbank.com/javascript/image/vi/) và Trình diễn ảnh (http://www.javascriptbank.com/javascript/image/slideshow/vi/)





Tạo menu luôn ở đầu trang (http://www.javascriptbank.com/vi=menu luôn ở đầu trang) - Tạo trình đơn động (http://www.javascriptbank.com/javascript/menu/vi/) - Cách loại bỏ dấu tiếng Việt với JavaScript (http://www.javascriptbank.com/forum/cach-loai-bo-dau-tieng-viet-t114.html)