首页 >web前端 >html教程 >如何在javascript中改变div背景图片?_html/css_WEB-ITnose

如何在javascript中改变div背景图片?_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 12:21:191086浏览

javascript div背景图片


div如下:


javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

回复讨论(解决方案)

测试了一下,LZ的代码很好用啊。
测试的时候DIV本没有图片。鼠标移动到上面就显示了。
没什么问题

背景图片的 url 正确不?

div如下:



javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

你要保证背景图片路径正确才行



div如下:



javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

你要保证背景图片路径正确才行 这个url在哪里定义呢?我还以为这是个关键字呢,难道它只是个变量?

  
$(function(){
  $("div").onmouseover(function(){
    $(this).css("background-image","img/yygk1.png")
  })
})
我比较习惯用JQuery 写,图片路径要正确,在同一级目录下可以直接写文件夹的名称,上一级就得用../



div如下:



javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

你要保证背景图片路径正确才行



div如下:


javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

你要保证背景图片路径正确才行 "url(img/yygk1.png)"括号中的路径是对的,这个"url"也得定义吗?还是说这是个关键字?

不需要定义,LZ写的URL正确
又测试了一次,可以正确执行。

<div onmouseover="changeImg(this)" style="background-image:url(/xi.jpg);">	asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas</div><script type="text/javascript">function changeImg(obj){   obj.style.backgroundImage = "url(img/1.png)";   //obj.style.backgroundImg = "url(img/yygk1.png)";   //obj.style.background = "url(img/yygk1.png)";}</script>




div如下:



javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

你要保证背景图片路径正确才行



div如下:


javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

你要保证背景图片路径正确才行 "url(img/yygk1.png)"括号中的路径是对的,这个"url"也得定义吗?还是说这是个关键字?
不是的,晕死,你懂不懂CSS的基本知识啊,url(img/yygk1.png),能去了解一下基本的知识么?

div如下:



javascript方法:
function changeImg(obj){
   obj.style.backgroundImage = "url(img/yygk1.png)";
   //obj.style.backgroundImg = "url(img/yygk1.png)";
   //obj.style.background = "url(img/yygk1.png)";
}

div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢?

我也测了一下,不过要先将<script>中的2个<br>标签改到<body>标签中才可行,否则会报js异常。如下: <br /> <pre class="sycode" name="code">&lt;div onmouseover=&quot;changeImg(this)&quot; style=&quot;background-image:url(2.jpg); width:600px; height:500px;&quot;&gt; asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjas ldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas&lt;/div&gt;&lt;br&gt;&lt;script type=&quot;text/javascript&quot;&gt;function changeImg(obj){ obj.style.backgroundImage = &quot;url(2.png)&quot;; //obj.style.backgroundImg = &quot;url(img/yygk1.png)&quot;; //obj.style.background = &quot;url(img/yygk1.png)&quot;;}&lt;/script&gt;</pre> <br /> <br /> 不需要定义,LZ写的URL正确 <br /> 又测试了一次,可以正确执行。 <br /> <pre class="sycode" name="code">&lt;div onmouseover=&quot;changeImg(this)&quot; style=&quot;background-image:url(/xi.jpg);&quot;&gt; asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas&lt;/div&gt;&lt;script type=&quot;text/javascript&quot;&gt;function changeImg(obj){ obj.style.backgroundImage = &quot;url(img/1.png)&quot;; //obj.style.backgroundImg = &quot;url(img/yygk1.png)&quot;; //obj.style.background = &quot;url(img/yygk1.png)&quot;;}&lt;/script&gt;</pre> <br /> <br /> div如下: <br /> <div onmouseover="changeImg(this)"> <br /> <br /> javascript方法: <br /> function changeImg(obj){ <br /> obj.style.backgroundImage = "url(img/yygk1.png)"; <br /> //obj.style.backgroundImg = "url(img/yygk1.png)"; <br /> //obj.style.background = "url(img/yygk1.png)"; <br /> } <br /> <br /> div原本是有背景图片的,当鼠标移动到div上的时,期望改变背景图片为yygk1.png,但实际运行结果是背景图片没了,这是怎么回事呢? <br /> <br /> 我也测了一下,不过要先将<script>中的2个<br>标签改到<body>标签中才可行,否则会报js异常。如下: <br /> <pre class="sycode" name="code">&lt;div onmouseover=&quot;changeImg(this)&quot; style=&quot;background-image:url(2.jpg);&quot;&gt; asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjas ldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas&lt;/div&gt;&lt;script type=&quot;text/javascript&quot;&gt;function changeImg(obj){ obj.style.backgroundImage = &quot;url(2.png)&quot;; //obj.style.backgroundImg = &quot;url(img/yygk1.png)&quot;; //obj.style.background = &quot;url(img/yygk1.png)&quot;;}&lt;/script&gt;&lt;br&gt;&lt;br&gt;</pre> <br /> <br /> 不需要定义,LZ写的URL正确 <br /> 又测试了一次,可以正确执行。 <br /> <pre class="sycode" name="code">&lt;div onmouseover=&quot;changeImg(this)&quot; style=&quot;background-image:url(/xi.jpg);&quot;&gt; asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas&lt;/div&gt;&lt;script type=&quot;text/javascript&quot;&gt;function changeImg(obj){ obj.style.backgroundImage = &quot;url(img/1.png)&quot;; //obj.style.backgroundImg = &quot;url(img/yygk1.png)&quot;; //obj.style.background = &quot;url(img/yygk1.png)&quot;;}&lt;/script&gt;</pre> <br /> <br /> 我也测了一下,不过要先将<script>中的2个<br>标签放到<script>标签之外才可行,否则会报js异常。如下: <br /> <pre class="sycode" name="code"></pre> <br /> <div onmouseover="changeImg(this)" style="background-image:url(2.jpg);"> <br /> asdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdkls <br /> jksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjas ldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlks <br /> jdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjk <br /> sldjklasasdjasldjlsdjlksjdklsjksldjklasasdjasldjlsdjlksjdklsjksldjklas <br /> <br /> <br /> <script type="text/javascript"> <br /> function changeImg(obj){ <br /> obj.style.backgroundImage = "url(img/yygk1.png)"; <br /> //obj.style.backgroundImg = "url(img/yygk1.png)"; <br /> //obj.style.background = "url(img/yygk1.png)"; <br /> } <br /> </script>



声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn