These custom Data Attributes are prefixed with the data-text such data-xxx and data-xxx. Here we create a Web page named customDataattribute.html which shows how to use custom data attributes.
<!doctype html>
<head>
<title>this example of the custom Data attribute </title>
</head>
<body>
<img src="car2.jpg" data-out="car1.jpg" data-over="car3.jpg">
<img src="car2.jpg" data-out="car1.jpg" data-over="car3.jpg">
<img src="car2.jpg" data-out="car1.jpg" data-over="car3.jpg">
<SCRIPT type="text/javascript">
function imagerollover() {
var allimages=document.getElementsByTagName("img")
var preloadimages=[]
for (var i=0;i<allimages.length;i++){
if(allimages[i].getAttribute("data-over"))
{
preloadimages.push(new Image())
preloadimages[preloadimages.length-1].src=allimages[i].getAttribute
("data-over")
allimages[i].onmouseover=function(){
this.src=this.getAttribute("data-over")
}
allimages[i].onmouseout=function() {
this.src=this.getAttribute("data-out")
}
}
}
}
imagerollover()
</SCRIPT>
</body>
</html>
In this Web page, three images are shown by using the IMG element. Two custom data attributes data-out and data-over, are created with the IMG element to specify the source of other images.
When you keep mouse over any image the image is changed into another image. This is because the data-over attribute is modifying one image with another image.
<!doctype html>
<head>
<title>this example of the custom Data attribute </title>
</head>
<body>
<img src="car2.jpg" data-out="car1.jpg" data-over="car3.jpg">
<img src="car2.jpg" data-out="car1.jpg" data-over="car3.jpg">
<img src="car2.jpg" data-out="car1.jpg" data-over="car3.jpg">
<SCRIPT type="text/javascript">
function imagerollover() {
var allimages=document.getElementsByTagName("img")
var preloadimages=[]
for (var i=0;i<allimages.length;i++){
if(allimages[i].getAttribute("data-over"))
{
preloadimages.push(new Image())
preloadimages[preloadimages.length-1].src=allimages[i].getAttribute
("data-over")
allimages[i].onmouseover=function(){
this.src=this.getAttribute("data-over")
}
allimages[i].onmouseout=function() {
this.src=this.getAttribute("data-out")
}
}
}
}
imagerollover()
</SCRIPT>
</body>
</html>
In this Web page, three images are shown by using the IMG element. Two custom data attributes data-out and data-over, are created with the IMG element to specify the source of other images.
When you keep mouse over any image the image is changed into another image. This is because the data-over attribute is modifying one image with another image.
No comments:
Post a Comment