how to change image inside <p> tag on mouse over through jquery

Question

my code-

<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>

I have some links on mouse over of links I am changing the inside text and image but problem is text is getting changed but image gets disappear. jquery code-

<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

I think you just need to structure you html better:

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.");
    });

The reason why your image disappears is because .text() replaces any content you have with the new text.

I hope the new code helps