0

これどうやってするの？

テキスト ハイパーリンクを設定し、ホバーするとそのテキスト リンクが画像になることは可能ですか?

iv 画像のロールオーバーを見たことがありますが、テキストから画像へのロールオーバーをコーディングする方法をまだ見ていないか、知りません。

どこから始めて、どのプログラミング言語から始めればよいのかわかりません。ジャバスクリプト？php? jquery?

私は次のコードを使用して始めました：

<a href = "#" onmouseover = "(document.img.src)='SAM_2251.jpg';">Mouseover here</a>

<img name = "img" alt = "" border = "0" />

しかし、これが行うことは、画像がその下にロードされている間、画面上にテキストを保持することです。画像でテキストを完全に取り除きたいです。

みんな助けて？どうもありがとうございました。

4

6 に答える 6

3

html と css の背景画像だけを使用して実行できます。

html

<a href = "#" class="hover_image">Mouseover here</a>

CSS

a.hover_image:hover {
    background: url(/url/to/image) no-repeat center center;
    text-indent: -9999em;
}

タグの幅と高さを定義するには、おそらくもう少し css が必要ですaが、これが基本です。

于 2012-04-25T00:06:48.093 に答える
2

さまざまな方法で行うことができます。アイデアを確認するためだけに、CSS の大まかな例を次に示します。

これを試して

于 2012-04-25T00:04:57.740 に答える
1

これにより、ホバーしたときにのみリンクが画像に変更され、ホバーアウトするとテキストになります（CSSのみ）

<style>
.changeable img
{
  display:none;
}
.changeable:hover span
{
  display:none;
}
.changeable:hover img
{
  display:inline-block;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

または、リンクを永続的に画像に変更する場合 (jQuery を使用)

<style>
.changeable img
{
  display:none;
}
</style>
<a href="http://www.example.com" class="changeable"><span>Hyper Text</span><img src="img.png" /></a>

<script type="text/javascript">
$('.changeable').hover(function(){
  $(this).children('img').show();
  $(this).children('span').hide();
})
</script>
于 2012-04-25T00:17:03.243 に答える
0

ここにそれを行うJavaScriptの方法があります

    <div id="link">    
    <a href = "#" onmouseover = "document.getElementById('link').style.display='none';document.getElementById('hoverImage').style.display='block';;">Mouseover here</a>  
</div>
<div id="hoverImage" style="display:none">
    <img name = "img" alt = "" border = "0" src="img.JPG" onmouseout = "document.getElementById('link').style.display='block';document.getElementById('hoverImage').style.display='none';;" />    
</div>
于 2012-04-25T00:10:37.983 に答える
0

これは jQuery でも実行できます。

See In Action

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>

<body>
<script type='text/javascript'>
$( function() {
  $("#imglink").hover(
    function () {
      $(this).attr('small',$(this).html());
      $(this).html($(this).attr('full'));
    },
    function () {
       $(this).html($(this).attr('small'));
    }
  );
});
</script>

<a herf="" id='imglink' full='<img border="0" src="someImage.png" width="163" height="37"/>'>Rollover for image 'n' rollout for text</a>

</body>
</html>
于 2012-04-25T00:12:33.040 に答える
0

次のような HTML を想定します。

<a href="http://www.example.com/image.png" class="textToImg">Some text</a>

次の JavaScript が機能するはずです。

function textToImage(elem){
    if (!elem) {
        return false;
    }
    else {
        var img = document.createElement('img');
        img.src = elem.href;
        elem.removeChild(elem.firstChild);
        elem.appendChild(img);
    }
}

JS Fiddle の概念実証。

于 2012-04-25T00:06:07.467 に答える