マウスオーバーについて

オンマウスで画像を入れ替える・・・・
そんなに難しくはないと思ったので、調べてみました。



bapioさんへ。
やりたいのは、こんな感じですか？
（画像は bapioとこからお借りしました。URLもってきただけです。



サンプルのタグ
<img src="/_images/blog/_c54/bapio/m_E38286E3828AE381A3E381BAE8A68FE588B6E78988.jpg" onmouseover="this.src='/_images/blog/_c54/bapio/m_E38286E3828AE381A3E381BA-49271.jpg';" onmouseout="this.src='/_images/blog/_c54/bapio/m_E38286E3828AE381A3E381BAE8A68FE588B6E78988.jpg';">



タグはこれです。
<img src="画像１ＵＲＬ" onmouseover="this.src='画像２ＵＲＬ';" onmouseout="this.src='画像１ＵＲＬ';">


画像１ＵＲＬに、初めに表示したい画像のURLをコピペ。
上のサンプルだと、
「/_images/blog/_c54/bapio/m_E38286E3828AE381A3E381BAE8A68FE588B6E78988.jpg」

画像２ＵＲＬに、マウスを乗せると変る画像のURLをコピペ。
上のサンプルですと、
「/_images/blog/_c54/bapio/m_E38286E3828AE381A3E381BA-49271.jpg'」
です。

最後の画像１ＵＲＬには、マウスを離すと表示する画像のURLをコピペ。

これで、できると思います～。
画像のURLは、一度、画像を貼り、そのタグからコピペするとラクですね。

普通に画像を貼ると、
<a href="/_images/blog/_c54/bapio/E38286E3828AE381A3E381BAE8A68FE588B6E78988.jpg" target="_blank"><img src="/_images/blog/_c54/bapio/m_E38286E3828AE381A3E381BAE8A68FE588B6E78988.jpg" width="404" height="500" border="0" align="" alt="ゆりっぺ規制版.jpg" /></a>

こういうタグが出来ますので、この中から、後の方の画像のURLを
「/_images/blog/_c54/bapio/m_E38286E3828AE381A3E381BAE8A68FE588B6E78988.jpg」
をコピペするとラクちんです。
画像ファイル名の前に　「m_」が付いている方を使うと
上手くできると思います。

他にも上手いやり方があるかもしれませんが、

一度、お試しくだされｗｗｗ


では、
(`・ω・́)ゝノシ

コメント 4

そうそうｗｗ
こういうのがやりたかったんですｗｗ
ちゃんと自分で調べてやってみたんですよｗ？
説明してくれてるブログがあって、そこ見ながらやってみたんですが、どうにも画像が上手く表示されなくて…

これ見てるとなんかできそうな気がするので、間に合えば次回の更新でやってみようと思います！
ってフォトショの自動選択機能と言い、こんなの簡単にできるkunって一体何者…

もう足を開けなんて言えないぜｗ
by bapio (2010-07-14 00:46) 

bapioさん、コメありがとうございます。

これでよかったんでね。よかったｗｗ
タグをコピペして、画像のURLだけ変更してみてくださいなｗｗ

画像が表示しないってことは、画像のURLが正しくないか、
なにか他のタグがじゃましてるんだと思いますねｗｗ

画像の名前って、画像ファイル名だけではダメなんですよね。
下のように、画像のパスまでいるんですよｗｗ
「/_images/blog/_c54/bapio/m_画像の名前.jpg」
私も画像表示させるのに、これがわかるまで、
さんざん調べたて苦しんだんで覚えてたのですｗ。

フォトショは昔から使ってるんで・・・・
でも、バージョン６.0で、CSは使ったことないっすよねｗｗ


私でわかるんであれば、相談のりますぜｗｗ
bapioさんのためなら、ひと肌でも、ふた肌でも、あげくまっぱになっても協力しますよｗｗ！
（どっかで聞いたようなセリフだ・・・？

では、がんばってｗｗｗ！

by kun (2010-07-14 02:18) 

マウスオーバーって、こんなに簡単なんですね。

別の人に聞いた時は、教えてくれなかったので、助かりました。
by プラチナ (2010-07-16 08:48) 

プラチナさん、コメありがとうございます。

＞マウスオーバーって、こんなに簡単なんですね。
いろいろあるんみたいなんですよｗｗ。
テストしてできたので、紹介したんですが・・・
たまたまソネブロでこのタグは使えましたけど、他で使えない場合もあるようですし・・・。　

ソネブロならこのタグは使えると思いますのでお試しくだされｗｗ

by kun (2010-07-17 01:55)