HTML/JSP -dynamically alter image map appearance

Hi all,
I have a problem, really more HTML than JSP so excuse me, that I would like to see if anyone has any ideas about:
I have an app that has an image map where people click on a hotspot, enter info into a form, then close the form again. Once entered, these records are 'attached' to that hotspot on the map. When a user clicks the hotspot again, the form is pre-populated with any attached records.
I'd like to visually 'cue' users that there are records for a particular region when they view the map. eg. make those hotspot areas have a line around their coords, etc.
Is there anyway to do this? I kind of doubt there is after looking at an HTML guide but I'm no HTML expert. Also, before someone suggests using HTML tables, I've tried it but it won't work as the maps will vary and don't lend themselves to fitting nicely into HTML tables.
Any advice would be greatly appreciated...
Thanks,
Mike

Actually, you could use the mouseover event to do any other thing with DHTML (aside from the status bar thing). Maybe show some DIV over the image or something. Look into what you can do with DHTML a little and decide what type of thing you'd want to do.

Similar Messages

JSP DynPages and Image Map

Hello,
I've created JSPs with JSP DynPages. Now i vant to switch from one JSP to the other. How can I do this? This is my Code from the first JSP:
<%-- DHLICenter.jsp --%>
<%@ taglib uri= "tagLib" prefix="hbj" %>
<!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" xml:lang="de" lang="de">
     <title>Ihre Auswahl</title>
     <head>
     </head>
     <body>
     <% String PublicURL = componentRequest.getWebResourcePath() ; %>
     <MAP NAME=map1>
          <AREA HREF="page2.jsp" COORDS="350,270,460,330">
     </MAP>
          <img src='<%= PublicURL+ "/images/screen1.png" %>' usemap="#map1" border="0" />
     </body>
</html>
The Path for the Image works fine. But when i click the area i got an error message (iview not found). Can someone help me? Thanks in advance...

Hi Alexander,
If u are using the jspdynpages ,,then navigate from one jsp to other thru the controller..
Its always best practice to change the jsp state in controller
for instnace ,,u can change ur code this way nd try:
Use an image Button using HTMLB
for instance
<htmlb:button id = "myButton14"
text =
"<img src='/sap/public/bsp/sap/public/bc/icons/s_s_okay.gif' border='0'>OK "
onClick = "myButtonClick"
encode = "FALSE" />
Now in ur controller
looks like this
public static final int PAGE1 = 0;
public static final int PAGE2 = 1;
int PAGE_STATUS = PAGE1 ;
public void doProcessBeforeOutput() throws PageException {
switch (PAGE_STATUS) {
case PAGE1 :
this.setJspName("page1.jsp");
break;
case PAGE2 :
this.setJspName("page2.jsp");
break;
public void onMyButtonClick(Event event) throws PageException {
try {
PAGE_STATUS = PAGE2;
} catch (Exception e) {
PAGE_STATUS = ERROR_PAGE;
Cheers
Swathi
Do offer pts nd ncourage:-)

Is HTML's image mapping in OWA not supported?

We compose a mail inserted with a HTML page which contains a image devided into serveral parts by using <map> and <area> tages. People received mail can follow the hyperlinks set in the different part of the image to be directed to various
web pages.
It is fine to display this HTML page with mail clients such as Outlook.
But in OWA (Exchange 2010), the hyperlinks inside the image are missing, only an image left.
So I am wondering if some HTML tags such as image mapping tag <map> and <area> are not supported in OWA.
Or do I need to do some configurations to make this effect?
Can someone give me some advices?
Thanks in advance!

Hi,
What's your Outlook version?
Based on my search, Outlook 2003 and Outlook 2007 can support HTML image mapping. Even Outlook 2010 don't support image mapping.
Someone encountered the same issue in Outlook 2010 as you got in OWA. It seems that OWA don't support HTML image mapping as well. You can look at the following thread.
https://social.technet.microsoft.com/Forums/office/en-US/aac24b10-40ab-4510-bd5a-17ab351a4711/how-do-i-use-an-image-map-in-outlook-2010?forum=outlook
Best regards,
Belinda Ma
TechNet Community Support

Image not appearing in JSP

I have developed a JSP using Studio and have a images in the same directory as the JSP page. It appears performing a Studio preview but after imported into the portal it's not appearing. I can't figure it out. I have tried puttting it into other directories still no luck.
Here is a piece of the jsp with the image in it.
</HEAD>
<BODY>
<P>
<STYLE>
.cagText {
     font-family : Verdana, Arial, Helvetica, sans-serif;
     font-size : 8pt;
</STYLE>
<TABLE ALIGN="center">
<TR>
     <TD WIDTH=400 VALIGN=top CLASS=cagText>
     <BR> ??????????<BR><BR>
     <DIV><B>NOTICE:</B> Electronic communications provided by the company???? <A HREF="http://www.xyz.cag Intranet</A>. Policy statement.</DIV>
     </TD>
     <TD> </TD>
     <TD VALIGN=top>
     <IMG SRC=WEB-INF/deployment/pcd/cag.ep.ISA-DisclaimerPage/pagelet/main_image.jpg WIDTH=260 HEIGHT=309 ALT=SAP BORDER=0>
     </TD>
</TR>
</TABLE>
</P>
</BODY>
</HTML>

Hi William,
if you are developing JSPs for the EP, why don't you use HTMLB instead of HTML?!
Anyhow, check Access image from jspdynpage and Problem finding image
Hope it helps
Detlev
PS: Please consider rewarding points for helpful answers on SDN. Thanks in advance!

Does WDA support HTML Image Maps?

How to implement HTML image maps in Web Dynpro for ABAP?
Is the usemap (and related area shapes) available?
What I mean is explained by the following example:
<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>
Thanks

Use IFrame UI element (if exists - hope yes) and link to it an HTML file with only your image-map.
If the image-map change by user, you must find the way to create the HTML in a dynamic way.
Sorry i haven't alot experience with ABAP, i did this in Java Web Dynpro but i guess you can do also with ABAP.

Image map in html email- color of text

I'm using some image maps in an html email newsletter and using the alt tag on some of the images to give a brief description as to what the newsletter content covers.
The issue I have is that the alt text is in the color blue. Can I control that and make it black? I've tried a few ideas but the text stubbornly remains blue........grrr!
Thanks
Os

RikRamsay14 wrote:
I think this is going to be one of those cases where I disagree with a large amount of your arguments. I find almost no valid reason for using a "slice and dice" method of email marketing and if the client is going to insist on that (or at least not accept the little extra time/cost in creating a template), it should be made very aware to them that the impact of the email will be severly diminished.
The hardest/most time consuming part of the template building (or HTML email building) is getting your first one that works consistently in all/most email clients. Once you have that one, its very easy and fast to change the layout, edit content etc. Add to that MailChimps resources on pre-designed HTML email templates and your good to go. http://mailchimp.com/resources/html-email-templates/
As for your examples above, they are not all done the same way.
http://www.screwfix.info/nl/jsp/m.jsp?c=4d2f0f00cbac503dfb is a relatively good example as the main focus of the email is in text - the top and the offer. The images are all products.
http://tre.emv3.com/HM?a=ENX7CloMai0H8SA9MOBj7h3nGHxKXLxSfPcStGb5lw8W0 bBhOG5mpqVsje_HheCmyF2x is a bad one as it's images all the way to the disclaimer.
You can see the differences by turning images off in your browser using the web deveoper toolbar.
I agree only IF you have a client that adheres to the template. I don't know many or any clients that adhere to anything personally. Its like when producing a magazine. Good ones adhere to a template design but they are generally produced by large companies with a good budget, a marketing department and a copywriter to make sure the content fit. My client are not in that league, they tend to write the copy themsleves and don't edit anything or give too much care or attention to following any layout. My job is to make what they supply fit. A template in that senario is going to be completley useless.
The first example above is probably 95% images....and you think that's a realatively good html email example?

Please!!!!!!   How can i add rows in html table dynamically [use jsp,bean]

hello, i am a fresher in jsp. i want to add new rows in html table dynamically.In my coding, just only shows in one row . please help my problem with correct coding and i don't want to use database. Thanks ...............!
Here is my coding-------------------
---------------- form.jsp --------------------->
<%@ page import="java.util.*,newtest1.Validation" %>
<jsp:useBean id="mybean" scope="page" class="newtest1.Validation" />
<jsp:setProperty name="mybean" property="name" param="name" />
<jsp:setProperty name="mybean" property="age" param="age" />
<% s[i][j] %>
<html>
<head><title>Form</title></head>
<body>
<form method="get">
<table border="0" width="700">
<tr>
<td width="150" align="right">Name</td>
<td width="550" align="left"><input type="text" name="name" size="35"></td>
</tr>
<tr>
<td width="150" align="right">Age</td>
<td width="550" align="left"><input type="text" name="age" size="35"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr><td> </td></tr>
<tr><td><input type="submit" name="submit" value="ADD"></td></tr>
<tr><td> </td></tr>
<tr><td width="100%" align="center" border=1>
<% int count=mybean.getStart();
for(int i=count; i<count+1; i++) { %>
<tr>
<td><jsp:getProperty name="mybean" property="name" /></td>
<td><jsp:getProperty name="mybean" property="age" /></td>
<td><%= count %></td>
<% count+=1; %>
</tr>
<% } %></td></tr>
</table>
</form>
</body>
</html>
----------------- Validation.java ----------------->
package newtest1;
import java.util.*;
public class Validation {
private String name;
private String age;
static int start=0;
public Validation() {    name=null;
age=null;
++start;}
public void setName(String username) { if(username!="")
name=username;
public String getName() { return name; }
public void setAge(String userage) { if (age!="")
{age=userage;}
public String getAge() { return age;   }
public int getStart() {
return start; }

Hi, Do you mean to say,
You have an HTML page in which you have a text field and an add button. If you enter anything in that text field and click on Add button the text field contents should be displayed in the same HTML page and you should be able to go on entering new values into the text field and you should be able to retain and display all the previously entered values..
and finally the list of added items are not stored in the database..
If this is the case
i. Your html form should be submitted to the same page.
ii. You need to have a Vector which holds the entered values.
iii. Bind the vector object to the request object and collect the same vector object from the request and display its contents...
I think this would help...

HTML image mapping not working only on Firefox browser

On my website I have some images, which show fine, however the image mapping which is coded using html does not work (i.e. when you click on a certain area in the picture and it takes you to another page). This is working fine for IE, safari and chrome.
Any help / advice would be appreciated.

Try posting at the Web Development / Standards Evangelism forum at MozillaZine. The helpers over there are more knowledgeable about web page development issues with Firefox. <br />
http://forums.mozillazine.org/viewforum.php?f=25 <br />
You'll need to register and login to be able to post in that forum.

Exporting image maps, no option to save HTML

Hi All,
I'm trying to export an image map from Illustrator CS6. However I can't get it to save the HTML.
I've setup my hotspots etc. However when I do "Save for Web", there is no option to save "Images & HTML". It only gives me the option of "Image Only".
The only way I've been able to get the HTML is to click on "Preview" from the "Save for Web" screen, and then copy and paste the image map code from there.
I've also tested it with slices, and same thing. There just seems to be no way to get it to generate a HTML file.
Am I missing something? Is there some other way I'm supposed to get it to create the HTML?
Thanks,
Eugene

That's weird that they would simply remove the output option, but still allow URL's to be linked to an object.
Anyway thanks for the response. I've just done some hunting around in Fireworks and figured out how to link hotspots to the Illustrator objects, and output the HTML image map. Problem sorted

Image-map coordination with JSP

I have a jpeg based image-map that shows the location of different customers in the city, with clickable regions. When a user selects a region it needs to execute a JSP that displays information about that customer that is pulled from an Oracle database. Each customer is defined by a unique idno that I was planning on associating with the clicable region.
Does anyone have any idea how to pass the idno for the clicable region to the JSP using ADF Struts?
Thank you for you help.

couldn't you just invoke the URL of a struts action and pass the id as a parameter to the URL?
Then use this parameter in the Struts action to set the right data model query.
for an example of setting the where clause when using ADF Business Components check out:
http://www.oracle.com/technology/products/jdev/tips/shmeltzer/setwhereclause/index.html

Can Acrobat XI convert an HTML file that contains an image map?

An HTML page I have has a complex image map with many links. It works fine in HTML but in converting it to PDF in Acrobat 11, only the top row of links in the map work. Clicking vertically below one of these links activate the link at the top but not the intended one.
I found this about creating an image map http://tinyurl.com/c6sonnj but do not understand the reference to Scene 7.
If it helps here is the HTML:
alt="Mute Button" title="Mute Button"/><area href="/man/Audio_Tracks#solo" shape="rect" coords="61,245,108,262" alt="Solo Button" title="Solo Button"/><area href="/man/Audio_Tracks#gain" shape="rect" coords="20,268,101,290" alt="Track Gain Slider" title="Track Gain Slider"/><area href="/man/Audio_Tracks#pan" shape="rect" coords="20,291,101,320" alt="Track Pan Slider" title="Track Pan Slider"/><area href="/man/Audio_Tracks#collapse" shape="rect" coords="31,371,93,389" alt="Track Collapse button" title="Track Collapse button"/><area href="/man/Audio_Tracks#scale" shape="rect" coords="109,191,140,389" alt="Vertical Scale" title="Vertical Scale"/><area href="/man/Audio_Tracks" shape="rect" coords="141,196,749,292" alt="Left Channel of Stereo Audio Track" title="Left Channel of Stereo Audio Track"/><area href="/man/Audio_Tracks" shape="rect" coords="141,293,749,390" alt="Right Channel of Stereo Audio Track" title="Right Channel of Stereo Audio Track"/><area href="/man/Audio_Tracks#panel" shape="rect" coords="12,194,108,390" alt="Track Control Panel" title="Track Control Panel"/><area href="/man/Selection_Toolbar#rate" shape="rect" coords="20,447,100,470" alt="Project Rate Drop-Down Menu" title="Project Rate Drop-Down Menu"/><area href="/man/Selection_Toolbar#snap" shape="rect" coords="131,450,196,468" alt="Snap To Checkbox" title="Snap To Checkbox"/><area href="/man/Selection_Toolbar" shape="rect" coords="9,423,771,479" alt="Selection Toolbar" title="Selection Toolbar"/></map>

Only via the Print Dialog's Save As Adobe PDF Workflow. However, Pages has it's own export to PDF that works wonderfully and saves hyperlinks.

Image map areas not dynamic

I have created a complexer version of the imageMenu, http://www.phatfusion.net/imagemenu/, which allows the active shapes to be any shape, not only rectangular, see http://jrvproducts.nl/ . This works great in all browser except safari, not in windows, neither on Mac.
The menu works with a single transparent overlay image which has image map areas (see source if you like. The map start at line 37). These areas are updates onDomReady and also when the menu is in motion by calculating the coordinates and setting the 'coords' attribute of every area. Setting this attribute doesn't seem to work in safari. I believe safari 3.0 on windows did do it onDomready, but not after page load. Now, in 3.1, the 'coords' aren't even being set onDomready anymore.
To see the 'coords' updating in action, see http://www.saulmade.nl/forum/slideMenu/ . Here I enabled the 'draw areas' option I've built for testing purposes. (It's actually drawing the shapes on canvas, but used the same coordinates as by which the areas are updated)
This looks to me like a bug, but perhaps anyone has a better explanation?
Can I submit issues to Apple?

darn, no-one seems to know an answer
To get this a bit further, or at least under the attention of the developers, *is there any way I can submit issues to Apple?*

Image Map Issue

I have recently converted my Robohelp for Word project to HTML, more or less successfully. As expected, all of the links that existed in the Winhelp project that originated from a bitmap, broke during the conversion process. I'm in the process of re-establishing these links, which is proving to be a very long process due to the fact that every time I right click on an image map to access its "properties," it takes nearly 90 seconds for the properties window to appear! Is there any way to speed this up? This happens even when I create a totally new image map on a new image in a new topic. Currently, all of my HTM files are in one huge folder... if, at this point, i created a folder for each htm file, would that possibly speed things up, or would that totally mess up my project? I'm on Robohelp 7. Thanks.

Hi there
Splitting the project into folders will likely help the issue. I think the slowdown occurs because all the topics and images and whatnot have to be read in so they are able to appear in the list. If you have several folders with fewer topics you should be better off.
One caveat though. ONLY move the files and folders from inside RoboHelp HTML. If you sneak behind its back and begin moving things about, you are likely to make RoboHelp wander around all bug eyed looking for things that aren't there any more!
Cheers... Rick
Begin learning RoboHelp HTML 7 within the day - $24.95!
Click here for Adobe Certified Captivate and RoboHelp HTML Training
Click here for the SorcerStone Blog
Click here for RoboHelp and Captivate eBooks

How to display servlet dynamically generated image ?

Hi,
How to display servlet dynamically generated image ?
I have a servlet generating a buffered image in the doGet. I want to display the image in a jsp page with other information. I'm not able to get it properly displayed.
**Try n# 1 **************************************************************
This displays my image but nothing elle :
ServletOutputStream sos = pResponse.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(sos);
encoder.encode(img);
**Try n# 2 ****************************************************************
I tried also :
In the servlet :
     request.setAttribute("renderedImage", img);
and in the jsp page :
     BufferedImage image = (BufferedImage) request.getAttribute("renderedImage");
     <img src="<%=ImageIO.write(image,"jpeg",response.getOutputStream())%>" width="300" height="280"/>
This last try draws big crap in the jsp page, thank you in advance.
Nelson

Call another servlet from the IMG tag. Have the servlet stream out the image using ImageIO (instead of writing HTML).

Image Maps not working

Hi, here's the url:
http://www.theexperience-exchange.co.uk
There are 4 image maps over the word 'Start' at the bottom of the page.
I've linked the pages in the properties panel and there appears to be an 'href' piece of coding in the html.
The other maps higher on the page seem to be OK.
Any clues anyone? Any help always appreciated.
All the best, RP

The 'overflow' style when used with values "scroll | hidden" is incredibly useful in controlling floats and margins on your page. When an element is assigned one of these styles, it becomes "a new block formatting context". What that means is that all interior floats (within that element) are automatically cleared, and no interior margins can escape the container. The problem you were having was that a subsequent element was somehow (and I'm not really sure why - didn't look closely enough to diagnose it) expanded enough vertically to MASK the linked buttons. When the buttons are masked, the mouseovers are not detected by the browser and the links don't work. By assigning the overflow style, you prevent that masking and the links are expressed.

HTML/JSP -dynamically alter image map appearance

Similar Messages

Maybe you are looking for