как изменить изображение внутри тега <p>при наведении курсора на jquery

Question

мой код-

<td>                    
<p align="justify" id="prodetail"><img src="images/PostQuote.png" id="protext">Airspot recently realeases a revolutionary wireless router that can help your WiFi router go social.<br> <a href="linkpage.htm" align="right">more...</a></p>
</td>

У меня есть несколько ссылок при наведении курсора на ссылки. Я изменяю внутренний текст и изображение, но проблема в том, что текст меняется, но изображение получает disappear.Код JQuery-

<script>
$('a#a1').bind('mouseover', function() {
    $('img#protext').attr("src", "images/PostQuote1.png");
    $('p#prodetail').text("In the INSPIRE series of products, we bring you a slew of an edutainment products with a a vision for delivering education through story telling and immersion paradigms through animation films and video classroom recordings.");
    });
$('a#a2').bind('mouseover', function() {
    $('img#protext').attr("src", "images/PostQuote2.png");
    $('p#prodetail').text("In the ASPIRE class of products, we offer a wide variety of video class room sessions. We are offering over 60 hours of video content dealing with topics related to Speed Mathematics [ Vedic and Trachtenberg Systems of Speed Math ], Basic Mathematics for Grade 1 to 7 [ covers all the 100+ topics on Arithmetic]");
    });
$('a#a3').bind('mouseover', function() {
    $('img#protext').attr("src", "images/PostQuote3.png");
    $('p#prodetail').text("Our motivation is very simple. We wanted to offer the student a sound conceptual understanding a foundation. For doing this we have no re-invented the wheel. We have re-engineered it. We have relied on the great works of Masters and Gurus.");
    });
</script>

Answer 1

Я думаю, вам просто нужно лучше структурировать HTML:

html

<td>
<p id="prodetail"><img src="images/PostQuote.png" id="protext" /><span>Airspot recently realeases a revolutionary wireless router that can help your WiFi router go social.</span><br /><a href="linkpage.htm">more...</a></p>
</td>

css

#prodetail { text-align: justify; }
#prodetail a { text-align: right; }

js

$('#a1').bind('mouseover', function() {
    $('#protext').attr("src", "images/PostQuote1.png");
    $('#prodetail > span').text("In the INSPIRE series of products, we bring you a slew of an edutainment products with a a vision for delivering education through story telling and immersion paradigms through animation films and video classroom recordings.");
    });
$('#a2').bind('mouseover', function() {
    $('#protext').attr("src", "images/PostQuote2.png");
    $('#prodetail > span').text("In the ASPIRE class of products, we offer a wide variety of video class room sessions. We are offering over 60 hours of video content dealing with topics related to Speed Mathematics [ Vedic and Trachtenberg Systems of Speed Math ], Basic Mathematics for Grade 1 to 7 [ covers all the 100+ topics on Arithmetic]");
    });
$('#a3').bind('mouseover', function() {
    $('#protext').attr("src", "images/PostQuote3.png");
    $('#prodetail > span').text("Our motivation is very simple. We wanted to offer the student a sound conceptual understanding a foundation. For doing this we have no re-invented the wheel. We have re-engineered it. We have relied on the great works of Masters and Gurus.");
    });

Причина, по которой ваше изображение исчезает, заключается в том, что .text() заменяет любой имеющийся у вас контент новым текстом.

Надеюсь, новый код поможет