⑴ 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值赋给它。曾经研究过网上的很多方法，个人觉得这个是最有效的了。