画像上にリンクとインラインフレームを同時作成

質問

大きな画像一枚でHPを作成したい場合、画像上にリンクを貼るのと、画像にインラインフレームを同時に作成するのは可能でしょうか？

添付した画像をご覧いただければわかってもらえると思いますが、
個々のLiveやら、Discographyやらにリンクを貼るだけなら私でも可能なんですが、それプラスNewsと書いてあるところの下段の空白にインラインフレーム等で、お知らせをスクロールできるように表示したいのです。
これらを同時にHTMLで作成するのは可能でしょうか？
その空白内にスクロールできてHTMLも使えるようなボックスでしたらインラインフレームでなくてもよいです。
可能でしたらお手数ですがやり方をご教授ください…お願いします！

回答No.4

ORUKA1951

absoluteで配置するCSS。
HTMLさえ、正しくマークアップされていたら、横並び＆たて並びナビゲーションバーであろうが、マウスオーバーでウィンドウの画像切り替えだろうが、自由にデザインできます。
body,html{
＿＿margin:0;padding:0;
＿＿background-color:black;color:white;
}
div.header h1{text-align:center;}
p{text-indent:1em;margin:0.5ex 0.5em;}
div.nav{
＿＿display:block;position:relative;
＿＿width:400px;height:300px;margin:0 auto;
＿＿border: red 1px solid;
＿＿background:url(./images/ul_back.jpg) gray no-repeat 0 0;
}
hr{clear:both;visibility:hidden;}
div.nav div.article{
＿＿overflow:auto;
＿＿position:absolute;top:0;right:0;
＿＿font-size:0.9em;
＿＿width:180px;height:180px;
＿＿border:ridge 6px gray;
＿＿padding:2px 5px;
＿＿background-color:white;
＿＿color:black;
}
div.nav div.article h2{font-size:1.2em;}
div.nav ul,div.nav ul li,
div.nav ul li a{
＿＿display:block;margin:0;padding:0;
}
div.nav ul{list-style:none;line-height:96px;font-size:1em;}
div.nav ul li{width:90px;height:90px;position:absolute;top:4px;left:4px;border:solid 1px white;}
div.nav ul li a{
＿＿width:90px;height:90px;margin:auto;
＿＿text-decoration:none;text-align:center;
＿＿font-weight:bold;color:yellow;
＿＿background:url(./images/ul_back.jpg);
＿＿background-position:-7px -7px;
＿＿border:outset 1px gray;
}
div.nav ul li+li{left:100px;}
div.nav ul li+li+li{top:100px;left:4px;}
div.nav ul li+li+li+li{left:100px;}
div.nav ul li+li+li+li+li{top:200px;left:4px;}
div.nav ul li+li+li+li+li+li{left:100px;}
div.nav ul li+li+li+li+li+li+li{left:200px;}
div.nav ul li+li+li+li+li+li+li+li{left:300px;}
div.nav ul li+li a{background-position:-103px -7px;}
div.nav ul li+li+li a{background-position: -7px -103px;}
div.nav ul li+li+li+li a{background-position:-103px -103px}
div.nav ul li+li+li+li+li a{background-position:-7px -203px}
div.nav ul li+li+li+li+li+li a{background-position:-103px -203px}
div.nav ul li+li+li+li+li+li+li a{background-position:-203px -203px}
div.nav ul li+li+li+li+li+li+li+li a{background-position:-303px -203px}
div.nav ul li a:visited{color:maroon;}
div.nav ul li a:hover,
div.nav ul li a:focus{color:lime;background-image:none;}
div.nav ul li a:active{color:fuchsia;border-style:inset;}