HTML open new window on image onclick - javascript

I have a single image in my web page, this image is basically an architecture diagram and I need to open a new window every time someone clicks this image with different content in the new opened window based on which component of the architecture diagram has been clicked by the user. How can I best achieve this feature? Please help as I am new to this.

This will do it
Link text
If you are using an image map for the links, just set the target to be _blank for each.
On a different note, do you have to open in a new window? It's just this will break the natural navigation of a browser and render the back button useless. Ending up with many new open tabs is more confusing and can be a bad user experience. Just a thought.

Perhaps use an image map and define area tags within it. This is the best way I can think of to support an image with multiple regions within it.

Make an image map. You can do this by hand or via online tools (just Google around, this is the first one I found). For your links use target="_blank" and it will open a new window/tab.

I'd suggest using map tag, i think it's easier than JavaScript
http://www.w3schools.com/tags/tag_map.asp

Related

Multiple views side-by-side windows-like AngularJS

I want to do something similar to Azure portal with ui-router/angularjs.
When a user clicks on a link, I want to open a new window and load the template related to the link. It's possible to "drag" all windows from left to right or right to left when many are open. I thought it would be possible to manage it by using a ui-view for each new window opened, but it seems that we can't setup dynamic view name for a state. What is the best way to achieve this?
Thank you!

HTML website design, links opening smaller windows on the page

So i tried searching for what I looked for but I couldn't really find exactly what I was looking for, if it even is possible that is.
What I'm looking for is a way to make the links people click on my website appear almost as ads, not a seperate window or tab in the browser but its own small window on the current tab itself. I made a image as a sort of example of what I mean. I don't know if it'll do any good but its worth a shot, I'd love to have it be able to work with Coolmenu as well. And if people wanted to open them in a new window or new tab, they could just right click, like below:
Update: 10:32 7.11
I realized that both of these links, as well as when i searched for some on my own all date form like 2006-2009, whereas all of them use
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
I think I can just write () (correct me if im wrong) as well as the paragraph stuff, but what should I do about all the ? should I just straight out remove it or replace it?
Update 10:50 7.11
I don't got more time to work on it today but next time I got some time, should I post all the other javascript and css I have on my page (only coolmenu that is) to give you some sort of idea of what exactly I want to accomplish?
And again, thank you all for the great help.
Update 12.11 08:05: I'm having trouble getting it to work together with Coolmenu.
I can provide with my css and javascript code for both coolmenu and the window thing if required, should i upload a .txt or just put it here?
Modal Windows
I guess you wanna make Modal Windows. You can easily do that using this tutorial here: Simple jQuery Modal Window Tutorial.
Screenshot:
Demo here: Demo
jQuery Dialog
Or you can even use jQuery Dialogs, which uses same principle, but easy to implement.
Although you don't want to open a new window, this is the quickest way you will get it to work how you want and involves the least amount of javascript.
Code:
Hi
Parameter 1 is the URL, parameter 2 is the name of the window.
In the 3rd parameter you can pass the following options:
status: The status bar at the bottom of the window.
toolbar: The standard browser toolbar, with buttons such as Back and Forward.
location: The Location entry field where you enter the URL.
menubar: The menu bar of the window
directories: The standard browser directory buttons, such as What’s New and What’s Cool
resizable: Allow/Disallow the user to resize the window.
scrollbars: Enable the scrollbars if the document is bigger than the window
height: Specifies the height of the window in pixels. (example:
height=’350′)
width: Specifies the width of the window in pixels.
For more info click here

Prompt whether to re-use an existing popout window or create a new one

I should preface this with the fact that I know virtually nothing about javascript and, apart from very rare situations like this, I don't really plan on using it much. So please forgive me for not having tried to learn more about it in order to try and solve this problem for myself.
The Situation:
I frequently like to make use of popout browser windows. To do this I created a bookmark in my browser that contains this small piece of Javascript I copied from somewhere – I can't remember where – and adapted to suit my screen:
javascript:%20var%20WindowPopup%20=%20window.open(window.location.href,'PopUp','left=1150,top=830,width=660,height=410,scrollbars=yes,location=no,status=no');
The Problem:
As things stand, when there is an existing popout window and I select the bookmark again, the same popout window is re-used if I'm at the same site, otherwise a new popout window is created. But there are many occasions when I would like to override this default behaviour.
Three Qustions:
How can I force popouts to always open in a new window?
How can I force popouts to always re-use an existing window?
Combining the previous two options: is it possible to detect if there is an existing popout window and prompt me as to whether I want to re-use it or open a new one?
Your help will be greatly appreciated.
The String "PopUp" in your bookmarklet is the name of your popup window. If you create another popup window using the same name, the already opened window will be reused.
If you want to get around this behavior, you will have to create a popup window with a unique name every time.
The following bookmarklet code will append a timestamp to the name of the popup window creating a unique name:
javascript:%20var%20WindowPopup%20=%20window.open(window.location.href,'PopUp'+Date.now(),'left=1150,top=830,width=660,height=410,scrollbars=yes,location=no,status=no');
This should work unless you're opening multiple popups within a millisecond.

Opening a new tab in JS

Is it possible to open a new tab in JS?? I tried googling it but most answers were answered before about years that it was not possible then, so is it possible now?!
Thank in advance :))
another question if possible, can we open to separate Urls using the same tag? I mean to open 2 diff tabs when clicking on one hyperlink
Yeah. You could do this in Javascript using window.open('target.html','mywindow','width=400,height=200') added to the onclick event.
See this for more info.
Opening a new tab in modern browsers is the same as opening a link in a new window by setting the target attribute. With HTML you do this by:
Click me
(See HTML a target attribute)
With javascript you do the same by window.open(url, '_blank'...) but remember that most browsers will block this unless it is done on the onClick event, so opening a new tab automatically after some timer has gone off for example is not a good idea.
You can also use link text if it's a link that should open in a new tab.
If you wanted to open both pages at the same time you could always combine both of the techniques mentioned above.
Double Link
This will open the pages thispage.html and thatpage.html simultaneously.
dont forget to add the title attribute to your link as opening new windows/tabs without warning users is generally frowned upon. Something like;
title="Clicking this link will open two new tabs"
should keep the standardistas off your back.
Also, you may want to separate your onclick event from your html as again munging them all together really isnt best practice. If you are using jquery then assign the onclick event by inserting a small piece of JavaScript at the top of your page as such;
$(function(){
$('#the-link-id').click(function(){
window.open('thatpage.html');
});
);

Make links inside an iframe open in a new window

I'm trying to display an map inside an iframe that has a needle which on mouseover shows some information about a certain company, the thing is once you click the link the page opens up inside the iframe which ruins the experience, so i was wondering is it possible to make the links inside an iframe open up in a new window instead perhaps using jquery or something similiar?
the code i have atm is
http://www.jsfiddle.net/rkd59/1/
Edit: the very least capture a click within the iframe so i might resize the iframe
You will need some kind of open API to do this properly, and Eniro doesn't provide one according to this page (in Swedish).
I would recommend you to use the Google Maps API v3 instead. I've made an example on jsFiddle that looks similar to that of Eniro.
I'll gladly give you more help with this, so just ask away!
You can't (or it is extremely hard to ) make events inside the iframe affect the parent page. This is to prevent attacks from XSS, or cross site scripting. Having said that, if the site within the iframe is on your own domain and you want to set up some extremely tricky ajaxing and php session IDs, maybe you could make something work, but even then I'm not sure. And I don't know if this would be a security hole, maybe someone else can speak to that. It would perhaps look like:
main page sets up session ID and passes that to the iframe url via a get variable
the iframe takes click information and sends it to a Session variable via an ajaxing call to a script on the server.
The main page then reads (how?) the session cookie and makes changes based on it's value.
All in all, you may find that it may be much simpler and more secure to acheive what you want using a different method.
Due this map is loaded inside an iFrame, it's not possible to run any javascript event listeners on the links, neither is it possible to change the html.
Please try the following:
<script>
x=document.querySelectorAll("a");
for(i=0;i<x.length;i++)
{
x[i].setAttribute("target","_blank");
}
</script>
Thus all links open in new frame.
To make a link popup in a new window you would usually use target="_blank" as such:
Go to Yahoo
However this will only work if you can modify the code you're showing within the iFrame
There is a partial solution.
You can add an absolutely positioned DIV tag over the top of the IFRAME and capture clicks on this instead. See example here shaded in 20% alpha red.
http://www.jsfiddle.net/rkd59/6/
However, this means that the map works in "read-only mode" and while you can capture the click event you wont know what link the user has clicked on.

Categories

Resources