Of Stack

The JS TAB dynamically replaces the banner image path

  • 2020-06-07 04:01:47
  • OfStack

This article shows how the JS TAB dynamically replaces the banner image path. Share to everybody for everybody reference. The specific analysis is as follows:

Here's a TAB that shows how to dynamically replace an image, using a definition implemented by the JS function to mouse over the path of the replacement image.

Parameters are explained as follows:

The object for which obj is currently firing the event
The class name of the currently selected element of hc
content selects the image that needs to be replaced
url is the path of the picture

The code is as follows: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> TAB dynamic replacement banner Image path </title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 hoverFn($("ul li"),"hover_css",$("p img"),"big");// Call a function  
 /*
   Defines the path of the mouse over the replacement image 
  function  2012.8.24 
   The author  zoowar 
   Parameters that 
  obj  The object that currently fires the event 
  hc  The class name of the currently selected element 
  content  Select the image that you want to replace the path 
  url  Is the path of the picture 
 */
 function hoverFn(obj,hc,content,url){
 obj.hover(function(){
  var h_css=hc;  
  $(this).addClass(h_css).siblings().removeClass(h_css);
  var imgUrl=$(this).attr(url);
  content.attr("src",imgUrl);  
  });
 }
})
</script>
<style type="text/css">
div{
width:1024px;height:768px;margin:0 auto;
}
ul{
width:1024px;height:40px;margin:0;padding:0;
}
ul li{
width:254px;line-height:40px;
border-bottom:solid 2px #FB066F;text-align:center;
list-style-type:none;float:left;margin-right:2px;
background:#fff;
}
ul li.hover_css{
border-bottom:solid 2px #06F;background:#f0f0f0;
}
p{
margin:0;padding:0;text-align:center;padding-top:20px;
}
</style>
</head>
<body>
<div>
<ul>
<li class="hover_css" big="images/wall_s1.jpg"> The scenery </li>
<li big="images/wall_s2.jpg"> The beauty </li>
<li big="images/wall_s3.jpg"> Smart pan </li>
<li big="images/wall_s4.jpg"> A spoof </li>
</ul>
<p>
<img src="images/wall_s1.jpg" />
</p>
</div>
</body>
</html>

I hope this article has been helpful for your javascript programming.

Related articles: