⑴ html 與html5 滑鼠點擊菜譜顯示圖片，如何實現
如果想減少網頁大小，實時載入那就只有用js了，
下面是個例子，實測了的，你可以根據需要進行優化：
<!DOCTYPE html>
<html>
<head>
<title>menu</title>
<script type="text/javascript">
function chgimg(src)
{
var img=document.getElementById("img");
img.src=src+".jpg";
}
</script>
</head>
<body>
<div>
<p><img src="a1.jpg" id="img" /></p>
<p><ul><li onclick="chgimg('a2');">a</li><li onclick="chgimg('a3');">b</li><li onclick="chgimg('a1');">c</li></ul></p>
</div>
</body>
</html>
⑵ html5實現圖片輪播如何實現
HTML部分: 實現圖片輪播首先需要使用HTML構建輪播圖的基本結構。可以使用無序列表（ul）和列表項（li）來實現。每張圖片作為一個列表項，通過CSS設置樣式，使其在輪播圖中顯示。例如，可以為每張圖片創建一個
元素作為容器，包裹整個輪播圖。
CSS部分： 為了實現輪播效果，CSS樣式需要定義圖片輪播的基本樣式和動畫效果。可以使用transform屬性調整圖片位置，利用transition屬性實現平滑過渡。設置圖片寬度、高度、容器寬度、滑動距離等參數。另外，可以通過設置:hover偽類，實現滑鼠懸停時的圖片放大效果。還可以使用CSS變數（--speed）來調整動畫速度。
JavaScript部分： 使用JavaScript來控制輪播圖的動畫效果。可以使用setInterval函數定時切換圖片。同時，可以使用事件監聽器（如mousedown、mouseup、mousemove）來控制圖片滑動速度和方向。設置一個變數來追蹤當前圖片的位置，並在動畫結束後自動切換到下一張或上一張圖片。此外，可以添加一個暫停功能，當用戶點擊暫停按鈕時，暫停動畫。
完整代碼： 將HTML、CSS和JavaScript代碼整合到一個文件中，例如index.html。HTML代碼用於構建頁面結構，CSS代碼用於定義樣式，JavaScript代碼用於實現交互功能。確保代碼邏輯清晰，易於維護。
效果： 完成上述步驟後，圖片輪播功能將實現。用戶可以點擊或滑動瀏覽圖片，實現自動或手動切換。圖片顯示流暢，過渡效果自然。同時，用戶可以通過滑鼠懸停來查看圖片的放大效果。整體布局美觀，響應式設計確保在不同設備上也能良好顯示。
⑶ html怎麼設置圖片垂直居中顯示
+如何將html中圖片文字垂直居中
文字垂直居中：
設置標簽高度height，並且設置行高line-height值與height值一樣。
也可以給父標簽設置相對定位（position：relative），然後文字用一個行內標簽（如span）包裹，並且給span設置絕對定位。
div垂直居中：
可以使用margin或padding來控制。比如margin：70%0；（上下70%，左右0）
如果滿意，望採納，謝謝！如果不懂，可隨時
Html如何設置元素垂直居中？
1.單行文本是通過設置父元素的height和line-height高度一致來完成的，其中height是指元素的高度,line-height是指行間距。
案例：
寫一個p>我是單行文本，我想垂直居中/p>
效果如圖：
2.在style>中加入CSS樣式
styletype="text/css">
p{
height:200px;
line-height:200px;
background:#3fc;
}
/style>
結果如圖:
3.父元素的高度確定，table標簽包裹然後設置vertical-align：middle
案例：
寫三個p>我是多行文本1，我想垂直居中/p>
p>我是多行文本2，我想垂直居中/p>
p>我是多行文本3，我想垂直居中/p>
效果如圖：
4.table（因為td標簽默認情況下就默認設置了vertical-align為middle。所以不用重新再寫vertical-align:middle）標簽包裹代碼設置和效果圖如下：
html中怎樣讓插入的圖片居中？
第一種方法：
設置父元素內文字居中即可讓圖片居中。
element{text-align:center;}
第二種方法：
設置圖片為塊級元素，設置左右margin為auto即可讓圖片居中。
img{display:block;margin-left:auto;margin-right:auto;}
網頁中如何用HTML/CSS實現文字居中於圖片？
1、前端用到的編輯器有很多，本例通過選擇SublimeText3編輯器來實現文字居中圖片的製作。第一步，打開電腦中安裝的SublimeText3，新建demo文件夾用來存放文件，在裡面新建一個html文件，通過Tab快捷鍵迅速創建一個html模板，並命名標題。如圖：
2、第二步，在頂部head標簽里引入外部CSS文件。當然，因為本例比較簡單，就直接寫在style標簽里了。建議實際開發應該寫在外部CSS文件中。
3、第三步，在Body中寫簡單的html代碼。在一個容器p中，給一個類名，然後加一個子p，命名類名，用來填充文字。子p中加一個h標簽，引入文字，隨便寫幾個文字。如圖：
4、第四步，寫父級p的樣式。其主要作用是包裹子級p。為了看得比較明顯，加一個邊框樣式：border：1pxsolid#093。如圖：
5、第五步，寫主要的字p樣式。設置長度和寬度，以及邊框樣式；文字顏色以及字體大小；接著以一張圖片作為背景圖片，不重復：background:url(images/0.jpg)no-repeat。如圖。你也可以隨時在瀏覽器中查看效果。可以看到，此時，文字是在圖片最上面。
6、第六步，接著是最關鍵的部分，設置文字居中於圖片，包括垂直和水平方向上的居中。其中，line-height：630px，使行高等於高度，文字即可在垂直方向居中；text-align:center，實現水平居中。如圖：
html圖片浮動後怎麼居中？
在父元素上設置text－align屬性為center
html5中如何讓圖片上下對齊居中？
圖片水平垂直居中情況很多，最簡單的辦法是吧圖片設置為背景，給背景設置background-position:center;如果只能用圖片分兩種情況：
1.圖片寬高固定，這種情況很簡單。水平居中：就在圖片的css中加dispaly:block;margin:0auto;垂直居中：自己算出（p的高度-圖片的高度）/2，得到margin-top值即可。
2.圖片高度未知，這個布局比較難實現。一般我是用js做的。水平居中：同上，在圖片的css中加dispaly:block;margin:0auto;垂直居中：用js算出（p的高度-圖片的高度）/2，得到margin-top值賦給它。曾經研究過網上的很多方法，個人覺得這個是最有效的了。