如何在php文件中使用javascript更改父html文件中的图片src？
[英]How can I use javascript inside of a php file to change an image src in the parent html file?
问题描述
I have a contact me box that is in a php file. 
我有一个php文件中的“与我联系”框。 The php is run inside a in the contact.html file. php在contact.html文件中的内部运行。 My goal is that when someone puts their mouse over the "submit" button, an image in the contact.html file will change. 我的目标是，当有人将鼠标悬停在“提交”按钮上时，contact.html文件中的图像将发生变化。 The submit button is in the php file. 提交按钮在php文件中。 How can I make a mouseover event that will change the src of the image in the contact.html file? 如何制作一个鼠标悬停事件来更改contact.html文件中图像的src？
In the contact.html file I have: 在contact.html文件中，我有：
<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: 我一直在使用的javascript是：
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: 在php文件中，我有：
<div class='container'>
<input type='submit' name='Submit' value='Submit' />
</div>
2 个解决方案
解决方案1
1 2013-01-17 11:38:38
Use jQuery to handle the mouseover event. 使用jQuery处理mouseover事件。 Include jQuery in your html like this: 像这样在您的html中包含jQuery：
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Add an id to your iframe: 在您的iframe中添加一个ID：
<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>
解决方案2
0 2013-01-17 10:53:48
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.