沖縄の不動産情報が見つかりますように(^▽^)o

西表島の住宅用地 139坪 更地   長浜アメリカン住宅




Top > スタッフBLOG:雑 記 > ロールオーバーテスト

2015年10月19日

ロールオーバーテスト

準備中の物件の間取りです。
売り出し時期、価格等は相談中ですので、今しばらくお待ちくださいます様お願い申し上げます。
本ページは、間取りのみと、敷地を含めたパースを組み合わせて表現できないかテストをしています。

1階 間取り1→ロールオーバー間取り2
クリック→間取り1を別窓拡大

↓onMouseタグを追記編集
2階 間取り
ロールオーバー失敗


追記は失敗の要因と対策の備忘録。

備忘録

OnMouseでの編集不可
ブログのソースコードを編集するも、自動でonmouse系タグを削除する為、2階間取のようにロールオーバーせず、画像1のみ表示される。
seesaa系ブログ(さくらのブログ)

対策
ロールオーバー専用のページを用意し、onmouseを使用して画像を重ね、本ページでインラインフレームで表示させる。
成功(FIREFOX 41.0.2)(公開後クローム、IEを要チェック)
但し、本文帯域が狭いため、小さめの表示になってしまう。
クリックすると、別窓で拡大(画像原寸)表示に変更する。

専用ページ側のHTML
▽1階画像置場

<a href="http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162002201f.bmp" target="_blank">
<img src="http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162002201f.bmp" alt="1階間取り" width="410" height="216" border="0" onMouseOver="this .src='http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162001201f.bmp'"onMouseOut="this .src='http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162002201f.bmp'" />
</a>

▽2階画像置場

<a href="http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162002202f.bmp" target="_blank">
<img src="http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162002202f.bmp" alt="2階間取り" width="340" height="179" border="0" onMouseOver="this .src='http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162001202f.bmp'"onMouseOut="this .src='http://jotoshouji.sakura.ne.jp/sblo_files/joto/image/1510162002202f.bmp'" />
</a>


表示させたいブログ側
インラインフレームタグをソースコードに追記
▽1階部分

<div><iframe src="http://jotoshouji.com/page024.html" name="1F" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="210" width="400">1階間取</iframe></div>

表示画像のサイズとフレームサイズを合わせる。に注意する。210では、画像2の縦が切れるため、220に変更。
フレームのスクロールバー、境界線は、非表示にする。
▽2階部分

<div><iframe src="http://jotoshouji.com/page025.html" name="1F" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" height="220" width="400">1階間取</iframe></div>


スクロールバーscrollimg
境界線frameborder
余白
marginwidth(横方向)
marginheight(縦方向)

ロールオーバーのセットとなる、画像1と画像2のサイズを合わせる。



sun 応援クリックお願いします sun

沖縄不動産 にほんブログ村 地域生活(街) 沖縄ブログ 沖縄県情報へ

『 にほんブログ村 沖縄情報 』

『人気ブログランキング』

上がって〜上がって〜上がって〜 ブログランキングに参加しています。 上がって〜
上のリンクをクリックして頂くと、1日1回有効の投票が出来ます。



上東商事[公式]サイトはコチラから♪
上東商事 Official Site
   

posted by kei at 09:00 | Comment(0) | スタッフBLOG:雑 記



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。