This is the code I have written to navigate to another jsp page onclicking the image. But, I didn't get the output. Please help me out.
<td align="center" >
<img src="image.jsp?imgid=<%=rs.getInt(1)%>" width="100" height="100" **onclick="ModelList.jsp"** >
Onclick is an event which expects an event handler (e.g a javascript function) to handle the even. so you can do something like this
onclick="window.href.location = ModelList.jsp"
the below alteration will work ..
<img src="image.jsp?imgid=<%=rs.getInt(1)%>" width="100" height="100" >
Related
what i am trying to do is fetching the session attribute from servlet, This attribute contains the path of my desired image which i want to display on jsp page. if i put this attribute like
<%=session.getAttribute("imageurl")%>
it give me perfect path. but when i do
<%String img=(String)session.getAttribute("imageurl");%>
<img src="img" alt="" width="100" height="100"/>
it shows nothing...
please help regarding this scenario
this is my code from servlet
String name=rs.getString("name");
String image=rs.getString("ppicture");
String loc = "G:/Friendbook/pictures/";
String imageurl=loc+image;imageurl=imageurl.trim();
HttpSession session=req.getSession();
session.setAttribute("name",name);
session.setAttribute("imageurl",imageurl);
req.setAttribute("imageurl", imageurl);
req.getRequestDispatcher("home.jsp").forward(req, res);
In your case src="img" will take soruce as "img".You can use Expression Language in jsp page as follow
<img src=${sessionScope.imageurl} alt="" width="100" height="100"/>
Error in img tag:
Do something like this, may it help:
<img src=<%= img %> alt="" width="100" height="100"/>
I made an image into a map with images-map.com
I made some clickable areas, but i cant figure out how to make a function when i click on one of the areas. When I click on the images it will direct me to a website.
<img id="Image-Maps-Com-image-maps-2014-02-12-182158" src=images/map2.png border="0" width="491" height="360" usemap="#image-maps-2014-02-12-182158" alt="" />
<map name="image-maps-2014-02-12-182158" id="ImageMapsCom-image-maps-2014-02-12-182158">
<area shape="rect" coords="489,358,491,360" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area id="cen" shape="poly" coords="242,117,227,117,212,143,232,175,244,173,252,169,264,166,272,161,278,155" alt="Centrum" title="Centrum" target="_self" href="http://www.image-maps.com/" />
</map>
I want to make a function that loads an ID of a highchart that I made when I click on that part of the image.
I tried to replace the href="http://www.image-maps.com/" with an id but it doesnt work
Do you mean JavaScript function? If yes, use JavaScript Framework, for example jQuery. If you use jQuery, here is simple event that will be bind to any img HTML tag.
$("img").click(function(){
alert("The image clicked");
}};
I have this foreach loop pulling images from my db :
`#foreach (var item in model)
<tr>
<td>
<img width="50" height="50" src="#Url.Action("GetImage", "Product", new { item.ProductId})"/>
</td>
...`
I tried to wrap it in an 'a' tag but all I get is 404's.
<img width="".../>
Any ideas?
an image with a hyperlink is what I'm trying to achieve. You click the
image and you're taken to the edit page.
Okay so suppose you get the image as shown in your question Product.GetImage and then the edit page is called by Product.Edit, you can have this:
<img src="#Url.Action("GetImage","Product")" />
i'm using TinyMCE for custom insert image, the problem is when i insert image with advimage, example
http://mysite/folder/image.jpg
but the image link when it loads become
<img title="" src="../../image.jpg" alt=" " width="450" height="581" />
how can i get the output to become like
<img title="" src="http://mysite/folder/image.jpg" alt=" " width="450" height="581" />
sorry for my bad english
thank you
Have a look at one of moxiecodes tinymce example pages:
http://www.tinymce.com/tryit/url_conversion.php
I guess this will show you how to configure your tinymce.
tinyMCE.init({
// General options
convert_urls : false,
...
I have an image gallery on my site that uses thumbnails that enlarge above the thumbnail line when clicked on. I'm having an issue with the auto-refresh; every time I click one of the thumbnails, the page refreshes, which restores it to the "master image".
I'm not (and sort of refuse, on the grounds that I believe all this can be done with simple CSS and HTML) using anything fancy to write this code, despite my knowledge of HTML being amateur at best.
Here's a sample of the code. Let me know if you need to see a different piece of it.
<div id="rightcol">
<img name="ImageOnly. src='#' /><img src="#" />
</div>
<div id="leftcol"> <div>
<a href="" onclick="ImageOnly.src='#'"><img src="#" />
</div>
Edit: Somehow I seem to have fixed this issue by changing
<a href="" onclick="ImageOnly.src='#'">
to
<a href="#" onclick="ImageOnly.src='#'">
Not really sure why this worked but would love an explanation...?
Why not just use some simple ajax/javascript .innerHTML? instead of trying to stop the auto refresh that occurs when you click on a hyperlink that has #. That way you could update the rightcol synchroniously.
HTML
<div id="rightcol">
<img name="ImageOnly.src" src='#' />
</div>
<div id="leftcol">
<img src="#" />
</div>
AJAX Script
function ajaxMove(src)
{
var image = '<img src="'+src+'" alt="my transferred image" />';
document.getElementById('rightcol').innerHTML = image;
}
How is it used?
Request the object from the onclick event.
Build an image tag based off the information in the object.
Transfer the new image tag to the element with the id 'rightcol'
Other options
You could also remove the href="#" from the <a> tag and work directly from the onclick event and then apply style="cursor:pointer;". Then it will work like a regular hyperlink but without the refresh.
<a onclick="javascript:ajaxMove('ImageOnly.src')" style="cursor:pointer;" >Click Me</a>