如何在PHP文件中使用JavaScript来更改父级HTML文件中的图像src？

我有一个联系我的盒子，是在一个PHP文件。 php在contact.html文件中运行。我的目标是，当有人将鼠标放在“提交”按钮上时，contact.html文件中的图像将会更改。提交按钮在php文件中。我如何做一个mouseover事件来改变contact.html文件中的图像的src？如何在PHP文件中使用JavaScript来更改父级HTML文件中的图像src？

在contact.html文件我有：

<img id = "me" src="Pictures/Image1.jpg" name="mypic"> 
<iframe src="contactform/contactform.php" frameborder='0' width='100%' height='600' ></iframe>

我一直在使用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 
     }

而在PHP文件，我有：

<div class='container'> 
    <input type='submit' name='Submit' value='Submit' /> 
</div>

来源

2013-01-17 Nick Helvig

你可以简单的onmouseover事件。例如，点击这个link。

你也可以使用jQuery来做到这一点。例如，点击此link。

来源

2013-01-17 10:53:48 nandu

使用jQuery来处理鼠标悬停事件。在你的HTML像这样包括jQuery的：

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
</head>

添加ID到iframe：

<img id = "me" src="Pictures/Image1.jpg" name="mypic"> 
<iframe id = "myframe" src="contactform/contactform.php" frameborder='0' width='100%' height='600' ></iframe>

这是鼠标悬停切换图像：

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

来源

2013-01-17 11:38:38 Lemonade

如何在PHP文件中使用JavaScript来更改父级HTML文件中的图像src？

回答

相关问题