-1

次のコードがあります。

 <script language="javascript" type="text/javascript">
 function SetImageName(strName)
 {
 document.getElementById("ImageName").value = strName;
 }
 </script>

 <form>
 <div id="slideshow">
 <div id="Container">
 <div id="Images">
            <img src="images/image1.jpg" name="image1.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image2.jpg" name="image2.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image3.jpg" name="image3.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image4.jpg" name="image4.jpg" onclick="SetImageName(this.name)"/>
            <img src="images/image5.jpg" name="image5.jpg" onclick="SetImageName(this.name)"/>
            <div id="slideEnd"></div>
          </div>
        </div>
    </div>
        <input type="hidden" value="" id="ImageName" name="ImageName"/></form>

ユーザーはリストから画像を選択できます。ユーザーが選択した画像のプレビューを取得したい。好き

 You are selected image is
 <?
 $image = $_POST["ImageName"];
 echo ('<img src="'.$image.'" />');
 ?>
4

3 に答える 3

1

次のことを試してください。

<html>
<head>
<title>sample</title>

<style type="text/css">
.hover_image a{
position:relative;
}
.hover_image a span{
position:absolute;
display:none;
z-index:99;
}
.hover_image a:hover span{
display:block;
}
</style>
</head>
<body>
<div class="hover_image">
<a href="#">Links text <span><img src="image.png" alt="image" height="100" /></span></a>
</div>
</body>
</html>

イメージ名 image.png を相対ディレクトリに配置し、ページ上のテキストにカーソルを合わせると、イメージが表示されます。

必要に応じてこれを編集できます。

于 2013-03-22T09:58:41.677 に答える
0

これはあなたのために働きます..それを参加させてください。私はこの演習のためにjQueryを使用しました。

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(document).ready(function()
    {
        $('div').click(function() {
            var image = $(this).text();
            $("#showImage").html("<img src='your_path/"+image+".png'>");
            // do something with the text
        });
    });
</script>
<div id="image1" >Image1</div>
<div id="image2" >Image2</div>
<div id="image3" >Image3</div>
<div id="image4" >Image4</div>

<div id="showImage"></div>
于 2013-03-22T10:11:35.567 に答える
0

わかりました、あなたはこれを行うことができます：

  1. コードに追加します:- すべての img タグに title 属性を追加し、name 属性を削除します
  2. クリックイベントで表示したい title 属性に値を与える

  3. このコードを追加します

    <script>
$(document).ready(function()
{
    $('img').click(function(){  
        var nameImg = $(this).attr('title');
        alert("you have selected "+nameImg);  
    });
});

このコードは画像の名前を警告します。この名前を他の div に表示したい場合は、id "selectedImgTag" を持つ 1 つの div を追加し、上記のコードをこのコードに置き換えます --

<script>
        $(document).ready(function()
        {
            $('img').click(function(){  
                var nameImg = $(this).attr('title');
                $("$selectedImgTag").html("you have selected "+nameImg);  
            });
        });
    </script>
于 2013-03-22T11:28:15.030 に答える