image map dead in internet explorer 10 - image

I need help with an image map! It seems they are not compatible with IE10. Although I have one on another site have made that works. But does anyone have any idea why this is not working? It was working then all the sudden after an update...stopped. Does anyone have any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<img alt="" src="http:///www.elysiawright.com/asset/mapjennifer.png" width="665" height="413" usemap="#Map" style="border-width: 0px;border-style: solid;" />
<map name="Map" id="Map">
<area shape="poly" coords="516,147,522,142,524,145,575,137,581,143,579,153,585,161,577,167,575,171,520,183,515,147" href="http://www.allnaturalbeelievers.com/Pennsylvania.html" />
<area shape="poly" coords="502,208,505,196,508,201,513,185,520,181,520,169,522,183,535,180,536,188,544,181,552,178,556,185,549,185,544,198,540,200,535,200,531,213,527,219,513,224,501,209" href="http://www.allnaturalbeelievers.com/WestVirginia.html" />
<area shape="poly" coords="468,159,474,199,475,199,491,204,501,204,520,182,516,148,501,159,484,156,466,159" href="http://www.allnaturalbeelievers.com/Ohio_2.html" />
<area shape="rect" coords="388,4,608,67" href="http://www.allnaturalbeelievers.com/distributorsignup.html" />
<area shape="poly" coords="555,402,564,389,565,378,565,373,534,318,459,325,457,331,476,331,485,341,497,334,516,342,524,366,557,403" href="http://www.allnaturalbeelievers.com/Florida.html" />
<area shape="poly" coords="472,199" href="#" />
<area shape="poly" coords="435,222,459,217,471,203,466,157,436,162,433,220" href="http://www.allnaturalbeelievers.com/Indiana.html" />
<area shape="poly" coords="496,230,582,220,576,210,573,201,564,189,560,186,557,184,549,184,548,198,538,200,530,218,513,226,506,223,495,228" href="http://www.allnaturalbeelievers.com/Virginia.html" target="#" />
</map>
</body>
</html>


Remove the third slash in the image URL and it works fine for me in IE10.
Demo: http://jsfiddle.net/xeG7d/1/
BAD
<img alt="" src="http:///www.elysiawright.com/asset/mapjennifer.png" width="665" height="413" usemap="#Map" style="border-width: 0px;border-style: solid;" />
GOOD
<img alt="" src="http://www.elysiawright.com/asset/mapjennifer.png" width="665" height="413" usemap="#Map" style="border-width: 0px;border-style: solid;" />
The W3 Validator catches this error, and is a valuable debugging tool for situations like this. However, I'll admit that despite the error I didn't catch the malformed URL right away.

Related

How can i add a link on a specific point of the image?

I have the following image and i want to add a link on the basket icon. How is that possible?
Thanks for your answers. Now i have two ways to do this or with html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p style="font-weight:normal;text-transform:uppercase;color:#FFD700;background-color:#000000;border: 5px ridge #ababab;letter-spacing:4pt;word-spacing:-3pt;font-size:42px;text-align:center;font-family:georgia, serif;line-height:4;margin:0px;padding:0px;width:100%;height:183px;">New Online Shop <i class="fa fa-shopping-cart " aria-hidden="true"></i>
</p>
Or with #blue answer using html shape attribute on the image:
<img src='https://i.stack.imgur.com/5I8q6.jpg' width='500' height='150' usemap='#basket' />
<map name='basket'>
<area shape='rect' coords='440 50 500 100' href='www.your_link.com' alt='basket_icon' />
</map>
<p>Click on the basket</p>

Try to use map and area to select specific areas on an image
The HTML
<img src='https://i.stack.imgur.com/5I8q6.jpg' width='500' height='150' usemap='#basket' />
<map name='basket'>
<area shape='rect' coords='440 50 500 100' href='www.your_link.com' alt='basket_icon' />
</map>
<p>Click on the basket</p>
I hope this helps!

spring MVC MAVEN: Static resource With 404

I have searched for this but didn't get the solution for the same. I got information i.e. we have to use <mvc:resources location="/resources/" mapping="/resources/**"/> and place all the static member like css/img/js inside resources folder
src
|--main
| |
| |--java
| |--resources
| |--webapp
And then we have to use either jstl or spring tags to map the resources as below:
<head>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<spring:url value="/resources/LoginForm.css" var="loginCss" />
<link rel="stylesheet" href="${loginCss}" type="text/css" />
</head>
I have developed some code by keeping all the points in mind but getting 404 error for static resources.
click here for project structure
code for dispatcher servlet.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd
">
<mvc:annotation-driven/>
<context:component-scan base-package="com.anand" />
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/views/</value>
</property>
<property name="suffix">
<value>.jsp</value>
</property>
</bean>
<bean id="messageSource" class="org.springframework.context.support.ReloadableResourceBundleMessageSource">
<property name="basename" value="/WEB-INF/messages" />
</bean>
<mvc:resources location="/resources/" mapping="/resources/**"/>
<mvc:default-servlet-handler />
</beans>
Code for loginform.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%# taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home-Login</title>
<spring:url value="/resources/LoginForm.css" var="loginCss" />
<spring:url value="/resources/logo1.PNG" var="logo1" />
<spring:url value="/resources/img1.png" var="img1" />
<spring:url value="/resources/img2.png" var="img2" />
<spring:url value="/resources/img3.png" var="img3" />
<link rel="stylesheet" href="${loginCss}" type="text/css" />
</head>
<body class="login">
<!-- header starts here -->
<div id="facebook-Bar">
<div id="facebook-Frame">
<div id="logo"> <img src="${logo1}" /></div>
<div id="header-main-right">
<div id="header-main-right-nav">
<form:form action="loginform.html" method="post" commandName="loginform">
<table border="0" style="border:none">
<tr>
<td ><form:input type="text" tabindex="1" path="userName" placeholder="UserName" class="inputtext radius1" value="" /></td>
<td ><form:input type="password" tabindex="2" path="password" placeholder="Password" class="inputtext radius1" /></td>
<td ><input type="submit" class="fbbutton" name="login" value="Login" /></td>
</tr>
<tr>
<td><label>
<input id="persist_box" type="checkbox" name="persistent" />
<span style="color:#ccc;">Keep me logged in</span></label></td>
<td><label>forgot your password?</label></td>
</tr>
</table>
</form:form>
</div>
</div>
</div>
</div>
<div class="slideshow-container" style="width:100%;height:80%; min-width:1000px;">
<div class="mySlides fade" style="width:100%;height:100%">
<div class="numbertext">1 / 3</div>
<img src="${img1}" style="width:100%;height:100%" />
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade" style="width:100%;height:100%">
<div class="numbertext">2 / 3</div>
<img src="${img2}" style="width:100%;height:100%" />
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade" style="width:100%;height:100%">
<div class="numbertext">3 / 3</div>
<img src="${img3}" style="width:100%;height:100%" />
<div class="text">Caption Three</div>
</div>
</div>
<br/>
<div style="text-align:center">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
<script>
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>
When it redirects me to loginform.jsp and i do F12-->network analysis, it shows me 404 for static resources like ,img1,img2,img3,logo1 and for .css file.
Click Here for F12 debug and chrome view of page without css

[[Solved]]: Finally solved the problem but i'm not sure the approach i have used here is correct or not but yeah it's working for me. Solution: i have copied the resources folder under webapp folder (i.e. WEB_INF & resources are siblings).
Click here for updated directory structure image
Please do provide better solution of this if you have for the same:

Resources inside WEB-INF are protected to be not accessible directly from the client.
In general, if it is static resources such as html, CSS, JavaScript can be placed outside WEB-INF. Static content placed outside can be therefore downloaded directly from the client browser.
Pls read Referencing a resource placed in WEB-INF folder in JSP file returns HTTP 404 on resource

Ajax is is removing element from bodyTile div tag but not displaying another element(page)

This is my menubar.jsp page. It contain some link when i am performing some action it is removing body tile Div tag element but not displaying another page
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%#taglib prefix="s" uri="/struts-tags"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="<c:url value="/resources/css/SpryMenuBarHorizontal.css"/>">
<script src="<c:url value="/resources/js/SpryMenuBar.js"/>"></script>
<script type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'>
</script>
<script type="text/javascript">
function editr(val) {
alert("hi" + val);
$('#bodyTile').children().remove();
$('#bodyTile').load(val);
}
</script>
</head>
<body>
<div id="menuTile">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>Colleges</li>
<li><a class="MenuBarItemSubmenu" href="#">Syllabus</a>
<ul>
<s:iterator value="#session.course">
<li><a class="MenuBarItemSubmenu" href="#">
<s:property
value="courseName" /></a>
<ul>
<s:iterator value="semisters">
<li><s:url action="UrlTag1Link.action" var="urlTag1"
escapeAmp="false">
<s:param name="semisterId">
<s:property
value="semisterId" />
</s:param>
<s:param name="courseId">
<s:property
value="courseId" />
</s:param>
</s:url><a href="<s:property
value="#urlTag1" />"> <s:property
value="semisterName" /></a>
<ul>
<s:iterator value="subjects">
<li><s:url
action="urlTagLink.action" var="urlTag"
escapeAmp="false">
<s:param
name="semisterId">
<s:property
value="semisterId" />
</s:param>
<s:param
name="courseId">
<s:property
value="courseId" />
</s:param>
<s:param
name="subjectId">
<s:property
value="subjectId" />
</s:param>
</s:url> <a
href="javascript:editr('<s:property value="#urlTag" />')"><s:property
value="subjectName" /></a></li>
</s:iterator>
</ul></li>
</s:iterator>
</ul></li>
</s:iterator>
</ul>
<li>About Us</li>
<li>Contact Us</li>
<li>Logout</li>
</ul>
</div>
<script src="<c:url value="/resources/js/jquery-2.0.3.min.js"
/>"></script>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {
imgDown : "SpryAssets/SpryMenuBarDownHover.gif",
imgRight : "SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
This is my Tile.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE tiles-definitions PUBLIC
"-//Apache Software Foundation//DTD Tiles Configuration 2.0//EN"
"http://tiles.apache.org/dtds/tiles-config_2_1.dtd">
<tiles-definitions>
<definition name="welcome" template="/mau.jsp">
<put-attribute name="myHeader" value="/header.jsp" />
<put-attribute name="myMenubar" value="/menubar2.jsp" />
<put-attribute name="myRight" value="/right.jsp" />
<put-attribute name="myLeft" value="/left.jsp" />
<put-attribute name="myBody" value="/body.jsp" />
<put-attribute name="myFooter" value="/footer.jsp" />
</definition>
<definition name="page1" extends="welcome">
<put-attribute name="myBody" value="/page1.jsp" />
</definition>
<definition name="page2" extends="welcome">
<put-attribute name="myBody" value="/page2.jsp" />
</definition>
</tiles-definitions>
this is baseLayout jsp page (mau.jsp)
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div style="width: 1000px height:600px;">
<table style="width: 100%;">
<tr>
<td colspan="3" style="height: 100px; background-color:
yellow;">
<div id="headerTile">
<tiles:insertAttribute name="myHeader" flush="false"
/>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="menuTile">
<tiles:insertAttribute name="myMenubar"
flush="false" />
</div>
</td>
</tr>
<tr>
<td height="60%" width="25%">
<div id="leftTile"
style="width: 100%; height: 400px; background-color:
green;">
<tiles:insertAttribute name="myLeft" flush="false" />
</div>
</td>
<td>
<div id="bodyTile" style="width: 100%; height: 400px;">
<tiles:insertAttribute name="myBody" flush="false" />
</div>
</td>
<td height="60%" width="25%">
<div id="rightTile"
style="width: 100%; height: 400px; background-color:
red;">
<tiles:insertAttribute name="myRight" flush="false"
/>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div id="footerTile">
<tiles:insertAttribute name="myFooter" flush="false"
/>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
this is action defined in Struts.xml
<action name="urlTagLink"
class="org.srtmun.student.action.UrlTagLinkAction"
method="subjectName">
<result name="page1" type="tiles" >page1</result>
</action>
<action name="UrlTag1Link"
class="org.srtmun.student.action.UrlTag1LinkAction"
method="semisterName">
<result name="page2" type="tiles">page2</result>
</action>

I think this issue for executed second line before the first line fully completed.
Try with use settimeout function or when/then or deffered-Promise functionality in jquery.

Imagemap links not working

I've created an imagemap using this generator: http://imagemap-generator.dariodomi.de/
...but the links on each of the icons don't work. Ive no idea why. You can see the map on the homepage of this unfinished site:
http://staging.pixiechildcare.co.uk/index.php
<img src="img/map-lg.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area id="tree" class="shape" alt="dfgdf" title="dfgdgf" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="89,47,146,43,189,73,205,121,165,149,114,143,95,106" />
<area id="cloud" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="610,41,654,62,665,104,648,146,614,175,558,127,565,64" />
<area id="splat" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="915,175,958,202,969,229,958,261,913,305,861,244,873,191" />
<area id="ladybird" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="1120,110,1160,130,1172,156,1167,188,1116,241,1066,192,1073,129" />
<area id="ball" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="1128,359,1169,377,1182,414,1174,442,1127,488,1083,453,1078,380" />
<area id="music" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="730,362,772,378,786,411,779,445,738,491,681,433,683,390" />
<area id="umbrella" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="519,228,549,237,572,275,568,314,519,363,465,308,480,248" />
<area id="train" class="shape" alt="" title="" href="http://staging.pixiechildcare.co.uk/index.php" shape="poly" coords="308,284,344,308,358,347,353,375,306,426,258,370,270,305" />
</map>

in your 'custom.js', you are explicitly preventing any action when clicking on an element that has class shape:
$(".shape").click(function(){
event.preventDefault();
});
remove that and it should work...

Facebook Like, Send, Share thumbnail and object

After many tries, i am not able to get either a correct Thumbnail of image or a complete object in Facebook Like, Send and Share Divs.
These are the meta tags.
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="id" content="619746228056373" />
<meta property="fb:app_id" content="185401314974757" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.thecampusbook.net" />
<meta property="og:title" content="CampusBook - News, Messages, Alerts, Timeline, Academic Info for Students, Teachers & Parents through Web, SMS & Email channels" />
<meta property="og:image" content="http://www.thecampusbook.net/images/broadcast_book_75.jpeg" />
Code for SHARE:
<a href="#"
onclick="
window.open( 'https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fthecampusbook.net',
'facebook-share-dialog',
'width=626,height=436');
return false;"
style="text-decoration:none;">SHARE</a>
Code for LIKE and SEND:
<div class=" fb-like"
data-href="http://www.thecampusbook.net/index.php" data-width="450" data-show-faces="true" data-send="true"
style=" clear: both; float: left; margin: 15px 10px 15px 0; ">
</div>
I will be thankful if anybody can help.

First of all http://www.thecampusbook.net/index.php is not valid HTML document. For FB OG debug and refresh cache look into Facebook debugger.

Resources