Home > Article > Web Front-end > Html tag frameset&image switching_html/css_WEB-ITnose
Html tag frameset&image switching_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:42916browse
Today I would like to share with you the html experience I just summarized in case you need it.
First, let’s introduce the frameset tag. This tag is used to switch web pages within the same page. It can be seen in most web pages. Because of the needs of the project, I will study it a little bit.
The frameset tag cannot be placed in the body tag. Its specific implementation is as follows:
Project structure:
Main page code (index. jsp):
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!-- 同一页面内相互切换 cols:左右分割框架 frameborder:设置分割线的宽度 noresize:设置分割线不可拖动 --><frameset cols="10%,*" frameborder="no"> <frame src="title01.jsp" noresize/> <frame src="content01.jsp" name="content"/><!-- name的值用来唯一标示该框架 --></frameset>
Left link page (title01.jsp):
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <body style="background-color: red;"> <a href="content01.jsp" target="content">标题1</a><br/><!-- target:用来指定跳转后显示的框架 --> <a href="content02.jsp" target="content">标题2</a><br/> <a href="content03.jsp" target="content">标题3</a><br/> <a href="content04.jsp" target="content">标题4</a><br/> </body></html>
Right content display interface (for Ordinary jsp interface), and finally a rendering is attached for everyone to study.
The following is an introduction to the simplest method of switching images in Html:
Project structure:
page Code (index.jsp):
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>图片切换</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="css/common.css"> <script type="text/javascript" src="js/jquery-1.11.1.js"></script> <script type="text/javascript" language="javascript"> $(function(){ $(".thumbs a").click(function(){ var largePath = $(this).attr("href"); var largeAlt = $(this).attr("title"); $("#largeImg").attr({ src : largePath, alt : largeAlt }); return false; }); }); </script> </head> <body> <h2>图片切换</h2> <p><img id="largeImg" src="images/img1-lg.jpg" alt="Large Image"/></p> <p class="thumbs"> <a href="images/img2-lg.jpg" title="Image2"><img src="images/img2-thumb.jpg"></a> <a href="images/img3-lg.jpg" title="Image3"><img src="images/img3-thumb.jpg"></a> <a href="images/img4-lg.jpg" title="Image4"><img src="images/img4-thumb.jpg"></a> <a href="images/img5-lg.jpg" title="Image5"><img src="images/img5-thumb.jpg"></a> <a href="images/img6-lg.jpg" title="Image6"><img src="images/img6-thumb.jpg"></a> </p> </body></html> Rendering:
Specific project source code, please leave your email if needed. Can anyone give me some advice as to which one has better results? Thank you