0

PHPファイルにある連絡先ボックスがあります。php は、contact.html ファイル内で実行されます。私の目標は、誰かがマウスを「送信」ボタンの上に置くと、contact.html ファイルの画像が変わることです。送信ボタンはphpファイルにあります。contact.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>
4

2 に答える 2

1

jQueryを使用してマウスオーバーイベントを処理します。次のように、htmlにjQueryを含めます。

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

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>

そして、これはマウスオーバーで画像を切り替えるためのものです。

<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-17T11:38:38.043 に答える
0

あなたは簡単なマウスオーバーイベントをすることができます。例については、このリンクをクリックしてください。

jqueryを使用してそれを行うこともできます。例については、このリンクをクリックしてください。

于 2013-01-17T10:53:48.500 に答える