img class влияет на каждое изображение и отображает другие изображения

0

Я озадачен и смущен. В приведенном ниже коде у меня есть изображение наведения, которое изменяется от красного до синего внизу. Дело в том. Добавив этот код, он также реплицируется в классе 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 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 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 sorted</b></li>
        <li>You don't need to worry about the domain - <b>It sorted</b></li>
        <li>You don't need to worry about the hosting - <b>It sorted</b></li>
        <li>You don't need to worry about the launch - <b>It sorted</b></li>
        <li>You don't need to worry about the process - <b>It sorted</b></li>
        </ul>
</div>
<br>
<div id="quote3">
This means you can RELAX: a new, gleaming and slick website is on it way! 
</div>

<div id="offer">
<p><b>But that 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>
Теги:

3 ответа

1

По сути, вам нужно ограничить свои селекторы. Код

$("img")

... находит все элементы img в DOM. И этот код:

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

... устанавливает src для всех элементов img в DOM. Вам нужно сузить область охвата.

Мне непонятно, на какой конкретный образ вы хотите работать, но если у него еще нет определенного значения id или class которое у него есть, вам нужно добавить его. Тогда либо используйте

$("#the-id")

или

$("img.the-class")

... чтобы ссылаться на него и устанавливать его src.

Поделиться
0

Используйте cssclass для второго изображения и используйте класс в jQuery для изменения источника..... если вы используете "img" в jQuery, это повлияет на все теги img. Сделай это:

добавьте class= "secondimageclass" ко второму изображению HTML и измените свой скрипт на использование класса

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

});
Поделиться
0

Это потому, что вы каждый раз вызываете все изображения. + Изменить

$('img').hover(function() {
    $('img').attr('src',source[1].src); // affects all images
  },function() {
    $('img').attr('src',source[0].src);    
  });

к этому (извините за каламбур) -

 $('img').hover(function() {
    $(this).attr('src',source[1].src); // affects only this image
  },function() {
    $(this).attr('src',source[0].src);    
  });
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню