こんにちは。
下部のfooterをマウスhoverすると、height:365pxまで伸びるように設定してあります。
変更したい点は、以下です。
①footerをhoverではなくクリックで伸び縮みできるようにしたい
②現時点ではfooterに指定してありますが、<img id="facebook"~の画像をクリックで伸び縮みできるようにしたい
ド素人なので、下記のコードを作動するように記述して下さると幸いです。
ここをこうしたら?的な簡単な説明だときっと無理・・・。
お手数ですが、宜しくお願い致します。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!doctype html> <html> <head> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head> <style> /*footer ▼-*/ #timeline{ margin-left:50px; margin-top:0px; padding-top:0px; background:#FFFFFF; } #snapwidget{ margin-left:10px; } #youtube{ padding-top:0px; margin-top:0px; margin-left:7px; } /*fb,insta,youtube マークの場所配置 ▼*/ #facebook { margin-left:1000px; margin-bottom:0px; padding-bottom:0px; margin-top:3px; } #copyright{ padding-top:0px; margin-top:0px; margin-right:46px; float:right; } /*footer クラスhover 色の設置▼*/ footer{ position: fixed !important; position: absolute; width:100%; bottom:0px; background:#CCC; background: linear-gradient(#a9a9a9 0%, #fff 40%); /*Chrome Safari用*/ background: -webkit-linear-gradient(#cccccc 0%, #fff 40%); /*Forefox用*/ background: -moz-linear-gradient(#ccc 0%, #fff 40%); /*Opera*/ background: -o-linear-gradient(#ccc 0%, #fff 40%); /*IE6-9用*/ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /*IE10用*/ background: -ms-linear-gradient(#ccc 0%, #fff 40%); opacity: 0.9; height:40px; -moz-transition: 0.5s linear; -webkit-transition: 0.5s linear; transition: 0.5s linear; } /*footerをhoverした時 伸びる高さ*/ footer:hover{ height:365px; } /*footer ▲-*/ </style> <body> <!--footer ▼--> <footer> <!-- facebookマーク画像の設定 --> <img id="facebook" src="images/facebook2.png" width="35" height="35"alt="cloud"/> <!-- timeline --> <iframe id="timeline" src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fhazukikouei&width=500&height=300&colorscheme=light&show_faces=true&header=false&stream=true&show_border=false&appId=745976198821640" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:300px;" allowTransparency="true"></iframe> <!-- Insta SnapWidget --> <iframe src="http://snapwidget.com/in/?u=eXVraWFveWF8aW58MTI1fDJ8Mnx8bm98Mnxub25lfG9uU3RhcnR8eWVzfG5v&ve=250615" title="Instagram Widget" class="snapwidget-widget" allowTransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:224px; height:305px"></iframe> <!-- youtube --> <iframe id="youtube" width="500" height="303" src="https://www.youtube.com/embed/2v9GnDiBGyQ" frameborder="0" allowfullscreen></iframe> <p id="copyright">©2014aaaaa.All Rights Reserved</p> </footer> <!--footer ▲--> </body> </html>回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/08/19 08:52
2015/08/19 12:38
2015/08/20 08:24
2015/08/21 13:02
2015/08/23 08:12
2015/08/26 01:29