How can I use javascript inside of a php file to change an image src in the parent html file?
Question
I have a contact me box that is in a php file. The php is run inside a in the contact.html file. My goal is that when someone puts their mouse over the "submit" button, an image in the contact.html file will change. The submit button is in the php file. How can I make a mouseover event that will change the src of the image in the contact.html file?
In the contact.html file I have:
<img id = "me" src="Pictures/Image1.jpg" name="mypic">
<iframe src="contactform/contactform.php" frameborder='0' width='100%' height='600' ></iframe>
The javascript I have been using is:
var image1=new Image()
image1.src="Pictures/Image1.jpg"
var image2=new Image()
image2.src="Pictures/Image2.jpg"
var image3=new Image()
image3.src="Pictures/Image4.jpg"
changepic1 = function() {
document.images.me.src=image1.src
}
changepic2 = function() {
document.images.me.src=image2.src
}
changepic3 = function() {
document.images.me.src=image3.src
}
And in the php file I have:
<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
2 answers
solution1
1 2013-01-17 11:38:38
Use jQuery to handle the mouseover event. Include jQuery in your html like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Add an id to your iframe:
<img id = "me" src="Pictures/Image1.jpg" name="mypic">
<iframe id = "myframe" src="contactform/contactform.php" frameborder='0' width='100%' height='600' ></iframe>
And this is for the mouseover to switch images:
<script type="text/javascript">
window.onload = function(){
var image1=new Image()
image1.src="Pictures/Image1.jpg"
var image2=new Image()
image2.src="Pictures/Image2.jpg"
var image3=new Image()
image3.src="Pictures/Image4.jpg"
$('#myframe').contents().find('container').mouseover(function() {
var thisSrc = $('#me').attr('src');
var newSrc;
if(thisSrc == image1.src)
newSrc = image2.src;
else if(thisSrc == image2.src)
newSrc = image3.src;
else
newSrc = image1.src;
$('#me').attr("src", newSrc);
});
};
</script>
solution2
0 2013-01-17 10:53:48
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.