• Breaking Entry

    2014年4月16日水曜日

    【HTML/CSS/Javascript】 1枚の画像に複数リンクをつけてみる (マビノギもちょっとだけ・・・)






    という便利なものを最近使い始めたのでもし今後何か良からぬ出来事が起きてしまった際に
    簡単に復元できるようにと更新します(*‘ω‘ *)
    97a28f59.jpg
    最近妹と喋った会話。
    リアル妹に夢を見てはいけない。絶対にだ。




    右上にくっついてるのがその1枚の画像に複数リンクをつけてみた実物ですが、正直いって画像編集が下手くそだとかなりクォリティが下がるのが最大の欠点で・・・。
    そもそも画像に複数リンクつけてハイおしまいみたいな雑な作りはまだまだなのでしょうが・・・。
    だってマウスかざしてもCSSでhoverもなにも付けてないので出来そのものがあまりよろしくないという・・・。
    それでも無いよりマシなので作ってみました(*‘ω‘ *)
    構造は主にHTMLだけで設定してます。
    ? ? ? ? ? ? ? ??<div?id='light_button'>
    <img?alt='画像の名前'?border='0'?height='画像サイズ'?src='画像URL'?usemap='light_button'?width='画像サイズ'/>
    <map?name='light_button'>
    ??<area?alt='表示させたい名前'?coords='左上の角X,左上の角Y,右下の角X,右下の角Y'?href='飛ばしたいURL'?shape='rect'?target='_blank'?title=表示させたい名前'/>
    ??<area?alt=表示させたい名前'?coords='中心点のX,中心点のY,半径の幅'?href=飛ばしたいURL'shape='circle'?target='_blank'?title=表示させたい名前'/>
    ??<area?alt=表示させたい名前'?coords='左上の角X,左上の角Y,右下の角X,右下の角Y'?href=飛ばしたいURL'?shape='rect'?target='_blank'?title=表示させたい名前'/>
    ??<area?alt=表示させたい名前'?coords='左上の角X,左上の角Y,右下の角X,右下の角Y
    ??'?href=飛ばしたいURL'shape='rect'?target='_blank'?title=表示させたい名前'/>
    </map>
    ??</div>

    一体何がどうなってるの・・・と申しますと、coordsで座標の位置を指定し、shape(形状)を決めてあとは同じ様に(*‘ω‘ *)
    自分が使ってるshapeはrect(四角形)とcircle(丸)を使用してます。
    shapeが違うだけでcoordsも変わってきますので注意が必要ですね( ・`ω・´)←
    多角形の場合はshapeをpolyにし、coordsを角の数だけX.Y.X.Y....と繰り返すだけです(。・ω・)←
    後はCSSからどこに表示させたいかを設定するだけですが僕の場合右上あたりに設置してるのでこうなってます。

    /*--右上の場所指定--*/
    div#light_button{
    position:?fixed;
    top:?140px;
    right:?0px;
    }
    /*--右上の場所指定--*/?
    ある程度CSSとHTMLの使い方を把握し始めたので自らテンプレート作る日もそう遠くはないかも!?(自惚れ)
    それとHTMLとは無関係ですがマビノギの方で6月あたりに忍者実装みたいですけども・・・。
    一つのスキル発動に動きが多すぎてジャイアント忍者がシュールになりそうで怖いです・・・(。・ω・)
    明日のイベントも何がくるのかちょっとだけ楽しみ。
    だがしかしそのイベント中に入院することになりそうなのが色々と残念でならない(´・ω・`)
    首が膨らむ病気とか命に関わるっぽいのでそう呑気にしてられないんだけども。
    忍者スキルの他に鯖統合ついに来ましたね(*‘ω‘ *)
    ぼっちを極める身として誰も寄せ付けない曰く付きの場所でジャイ子を眺めてようと思います←
    鯖統合のついでに名前変更わんちゃんあったらいいのにwwwwwwwwwwwwデュフフwwwwwwww (ゲス顔)

    0 件のコメント :

    コメントを投稿

    ANTENA RSS

    RE:ACCESS

    アクセスランキング

    Feedly

    follow us in feedly

    SPONSORED LINK

    PAGE TOP