个人中心
gpt4 book ai didi

jquery - img 类影响每个图像并替换其他图像

转载 作者：太空宇宙 更新时间：2023-11-04 13:28:57 25 4
gpt4 key购买 nike

我感到困惑和困惑。在下面的代码中，我有一个悬停图像，它在底部从红色变为蓝色。事情是。添加此代码后，它还会在页面顶部附近的 img 类中复制。我怎样才能分开两个img？为什么较低的图像会影响较高的图像？欢迎任何答案

<

!doctype html>
<html lang="en">
<head>

<title>Web Development Sevenoaks Kent - Web Design Sevenoaks Kent</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Web Development and Design in Sevenoaks Kent - DP Web Development based in Sevenoaks Kent ">
<meta name="keywords" content="Web Development, Bespoke Website Design, Sevenoaks, Kent, Website Maintenance, Website ">
<link rel="canonical" href="http://www.dpwebdevelopment.co.uk" />

<meta charset="utf-8">
<link rel="stylesheet" href="dpwebdevelopment4.css">


<link rel="icon" type="image/ico" href="http://www.dpwebdevelopment.co.uk/favicon.ico"/>


</head>
<body>

<?php require_once('nav.php'); ?>
    <div id="bgleft"></div>
    <div id="bgright"></div>


<img class="displayed"  alt='DP Web Development Sevenoaks Kent Logo' src='webdevelopmentimages/DPLogo1.jpg' > 

<div id="portrait">
<img  src='webdevelopmentimages/Doug-Pitchers.jpg' alt='Doug Pitchers owner of DP Web Development'>
</div> 


    <main>


<div id="quote1">
<h1>Your website is not <i>just</i> a website...<br></h1></div>
<div id="quote2">
             <h1>it's the best damn salesperson you'll ever have.</h1>
</div>

<div id="moveup">
<P class="blocktext">Whether you're a cocky upstart, a confident entrepreneur or a knarled old pro<b> one thing's for sure:</b>
</div>

<div id="quote3">
A professional outfit needs a professional web developer.
</div>

<p class="blocktext"><b>and you know you need a web developer that:</b></p>
<div id="list">
<ul>
         <li>totally "gets” you</li>
         <li>is jargon free! describes things in plain English</li>
         <li>gets back to you promptly</li>
         <li>hits deadlines. Every time.</li>
         <li>makes the project fun!</li>
         </ul>

</div>

<p class="blocktext"><b>You deserve a website thet will help you:</b></p>
<div id="list">
<ul>
        <li>Look good</li>
        <li>Showcase the results of your (extremely) hard work</li>
        <li>Impress clients - even when you're asleep</li>
        <li>Be seen as <b>the expert</b> in your field</li>
        <li>Be seen as cutting edge in your niche</li>
</ul>
</div>


<p class="blocktext"><b>and you won't have to lift a finger to get it</b></p>
<div id="list">
<ul>
        <li>You don't need to worry about the coding - <b>It's sorted</b></li>
        <li>You don't need to worry about the domain - <b>It's sorted</b></li>
        <li>You don't need to worry about the hosting - <b>It's sorted</b></li>
        <li>You don't need to worry about the launch - <b>It's sorted</b></li>
        <li>You don't need to worry about the process - <b>It's sorted</b></li>
        </ul>
</div>
<br>
<div id="quote3">
This means you can RELAX: a new, gleaming and slick website is on it's way! 
</div>

<div id="offer">
<p><b>But that's not all,</b> FOR FREE you get:</p>
</div>
<div id="list">
<ul>
     <li><b>Google Analytics:</b> You will be able to see who, where, how much and how long poeple stay on your site. you'' be able to see what they are doing on your site and you can compare reasutls with other times of the year. And loads more besides. Pretty much everyting you would want to know about visits to your website.</li>
     <li><b>Five new email addresses:</b> Because you@hotmail doesn't cut it anymore.  And you get </b>five</b>. For different people in the business. Different areas of the business. Or just to look damn good.</li>
     <li><b>All hosting costs, domain name purchases:</b>There are never any nasty surprises. Ever. The price quoted is the price you pay. It will never rise. Oh and I don't quote prices "+ VAT". Why do people do that? All prices are final.</li>
     <li><b>I will promote your website</b> on Facebook, Twitter and my own website for one month. Totally free publity! Need I say more?</li>
</ul>
</div>


<script src="_js/jquery-1.10.2.min.js"></script>
<div id="button1">
<script>
var a = [];

a[0] = "webdevelopmentimages/BUTTON2.gif";
a[1] = "webdevelopmentimages/BUTTON6.gif";


$(document).ready(function() {
  var source = $.preload(a); 
  $('img').attr('src',source[0].src); //just an acknowledgement (pre-loading done)
  $('img').hover(function() {
    $('img').attr('src',source[1].src);
  },function() {
    $('img').attr('src',source[0].src);    
  });

});



//Image Preloading....  
var cache = [];
  $.preload = function(arr) {
    for(var i = 0; i<arr.length; i++) {
      var img = new Image();
      img.src = arr[i];
      cache.push(img);
    }
    return cache;
  };


</script>

<img  />
</div>


<div id="emailbackground">
<div id="email">
<p>Enter your email below and feel empowered:<br>
Get help to make sense of the (digital) world
and look way more knowledgeable<br>
you'll never have to bluff your way again.</br>
<div id="emailbig">
+  get great entrepreneurial advice for <b>free!</b></p>


<div class="login">
<form  method="post" action="http://ymlp.com/subscribe.php?id=gbjmeqmgmgj" target="signup_popup" onsubmit="window.open( 'http://ymlp.com/subscribe.php?id=gbjmeqmgmgj','signup_popup','scrollbars=yes,width=600,height=450'); return true;"> 




E-mail address:
<input name="YMP0" size="20" type="text">


Name:
<input name="YMP8" size="20" type="text">

<div class="login">
<input value="Submit" type="submit">
</div>

</form>
</div>
</div>
<br>
</main>


</body>`
</html>

最佳答案

从根本上说，您需要对选择器进行限制。代码

$("img")

...查找 DOM 中的所有 img 元素。这段代码:

$('img').attr('src',source[1].src);

...在 DOM 中的所有 img 元素上设置src。您需要缩小范围。

我不清楚你想处理哪个特定图像，但如果它还没有一些只有它才有的 id 或 class 值，你会想加一个。然后要么使用

$("#the-id")

或

$("img.the-class")

...引用它并设置它的src。

关于jquery - img 类影响每个图像并替换其他图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23500752/

25 4 0
文章推荐： java - 即使使用 transient 也不会出现 NotSerializedException
文章推荐： html - 定位、裁剪并向图像、网络添加反射
文章推荐： java - Android 客户端未获取数据，但 .net 客户端从 SignalR 服务器获取数据
文章推荐： c++ - 如何避免此代码中的堆栈溢出，(递归函数)
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com