Nhắc lại về CSS
CSS định nghĩa màu sắc, font, layout… cho trang web. CSS bao gồm một tập các thuộc tính, mỗi thuộc tính có một tập giá trị nhất định.
Selector cho biết thành phần nào sẽ được áp dụng và có 3 loại Selector
- Selector thẻ . Ví dụ: h1 { font-family:arial; }
- Selector class . Ví dụ: .tenClass { font-family:arial; }
- Selector id . Ví dụ: #tenId { font-family:arial; }
JAVASCRIPT VÀ CSS
Trong DOM, mỗi node đều có một đối tượng style . Đối tượng style này chứa các thuộc tính css định dạng cho bản thân node. Bạn truy cập đến đối tượng style này để đổi định dạng css của các tag rất dễ dàng.
Chú ý: Trong đối tượng style, các thuộc tính CSS có dấu gạch ngang thì sẽ được bỏ dấu gạch ngang và viết hoa chữ cái của từ sau dấu gạch ngang (font-family è fontFamily)
<script>
document.getElementById('tp').style.color='red';
function act(){
document.getElementById('tp').style.backgroundColor='darkgray';
document.getElementById('tp').style.fontSize='30px';
document.getElementsByTagName('h2')[1].className='abc';
}
</script>Để định chọn nhiều phần tử định dạng. bạn dùng getElementsByName hoặc getElementsByTagName hoặc getElementsByClassName để chọn chúng rồi dùng vòng lặp để duyệt qua từng phần tử để định dạng:
<script>
var arr= document.getElementsByTagName("p");
var fs=15;
for (var i=0 ; i<arr.length ; i++){
fs+=5;
arr[i].style.fontSize = fs + "px";
arr[i].style.fontWeight=100;
}
</script>IMAGE ROLLOVER
Image Rollover là hiệu ứng thay đổi ảnh khi di chuột lên ảnh. Ảnh 1 hiện lên khi chạy ứng dụng, ảnh 2 hiện lên khi di chuột ra khỏi ảnh.
<img name="hinhsp" src="" width="250" onmouseover="h1()" onmouseout="h2()">
<script>
function h1(){
document.hinhsp.src="giay.jpg";
document.hinhsp.border="1px";
}
function h2(){
document.hinhsp.src="mu.jpg";
document.hinhsp.border="2px";
}
</script>Có thể nạp trước hình để dùng cho nhanh theo cách sau:
<img name="hinhsp" src="" width="250" onmouseover="h1()" onmouseout="h2()">
<script>
var img1 = new Image() ;
var img2 = new Image();
img1.src ='giay.jpg';
img2.src ='mu.jpg';
function h1(){
document.hinhsp.src=img1.src;
document.hinhsp.border="1px";
}
function h2(){
document.hinhsp.src=img2.src;
document.hinhsp.border="2px";
}
</script>SLIDE SHOW
Slide Show là hiệu ứng ảnh được hiện ra thay thế cho ảnh trước đó. Có thể có thanh điều khiển cho người dùng
Các bước để làm Slide Show
- Load trước tất cả các ảnh
- Xử lý sự kiện cho button Next
- Xử lý sự kiện cho button Back
<body onload = "loadAnh();">
<img id="hoa" src="anh0.jpg" width="500"/><br>
<input type="button" value="back" onclick="back();" />
<input type="button" value = "next" onclick="next();"/>
</body>
<script>
var anhAr = [];
var index=0;
function loadAnh() {
for (var i = 0; i < 9; i++) {
anhAr[i] = new Image();
anhAr[i].src = "h"+i+".jpg";
}//for
}
function next() {
if (index <8) {
index++;
document.getElementById("hoa").src = anhAr[index].src;
}
}
function back() {
if (index > 0) {
index--;
document.getElementById("hoa").src = anhAr[index].src;
}
}
</script>
IMAGE MAP
Image map là ảnh mà trên đó bạn gán những vùng nhỏ để liên kết tới các trang web khác nhau. Ví dụ image map bản đồ thế giới cho user chọn quốc gia, image khuôn mặt mà mỗi bộ phần liên kết tới trang web khác nhau…
Các thành phần nên image map
Một image map tạo nên bởi hai thành phần: thành phần thứ nhất là tag img để hiện hình trong trang. Thành phần thứ hai là hệ thống tọa độ diễn tả các vùng trong image. Thành phần thứ hai này bạn dùng tag map và area để tạo
Ví dụ:
<map name="face">
<area shape="circle" coords="117,203,30" href="a.html">
<area shape="circle" coords="218,203,30" href="b.html">
<area shape="rect" coords="130,250,205,286" href="c.html">
<area shape="rect" coords="126,292,210,332" href="d.html">
</map>
<img src="face.jpg" usemap="#face">Thuộc tính usemap của ảnh có giá trị bằng giá trị của thuộc tính name của thẻ map
