1

Hell Guys,

I am working since several days for this problem, but I haven't find a solution for my problem yet. Therefore I would like to ask you for a solution. So, I show you my code at first:

<style type="text/css">
td.tum {
  border-width:  8px;
  border-style:  solid;
  background-color: rgb(255, 255, 255);
  cursor:                        hand;
  font-family:           Arial;
  font-weight:           bold;
  text-align:            center;
  vertical-align:        top;
  width:                         120px;
}
td.tum a:link, td.tum a:visited, td.tum a:active {
  color:#FFFFFF;
  text-decoration:none;
}
td.tum a:hover, #tum5 a:hover {
  color:#FF0000;
  text-decoration:none;
}
#tead1 {
  text-align:            center;
}
#tum1 {
  border-color:  rgb(96, 74, 123);
  background-color: rgb(180, 170, 200);
  height:                        200px;
  padding-top:           50px;
}
#tum2 {
  border-color:  rgb(119, 147, 60);
  background-color: rgb(180, 200, 140);
  height:                        200px;
  padding-top:           50px;
}
</style>
<script src="jquery-1.10.1.min.js"></script>
<script type="text/javascript">
function changeText1(){
        document.getElementById('tum1').innerHTML = '<a href="http://www.youtube.com/">Youtube</a><br><hr><br><a href="http://www.microsoft.com/de-de/default.aspx" target="_blank">Microsoft</a>';
        }
function restoreText1(){
        document.getElementById('tum1').innerHTML = 'Youtube';
}
function changeText2(){
        document.getElementById('tum2').innerHTML = '<a href="http://www.nytimes.com/">New York Times</a><br><hr><br><a href="http://www.apple.com/de/" target="_blank">Apple</a><br><a href="http://www.zalando.de/?wt_ga41=8452736386_38069418586&wt_gk41=Phrase_8452736386_zalando&gclid=CLuz2qnw7r4CFejHtAodl3IA1Q" target="_blank">Zalando</a><br>';
}
function restoreText2(){
        document.getElementById('tum2').innerHTML = 'New York Times';
}

</script>


<table border="0px" cellpadding="0" cellspacing="0">
        <tr>
                <td id="tum1" rowspan="2" class="tum"
                        onmouseenter="this.style.backgroundColor='rgb(96, 74, 125)'; changeText1()"
                        onmouseleave="this.style.backgroundColor='rgb(180, 170, 201)'; restoreText1();"
                        onclick="document.location.href='http://www.youtube.com/'">
                        <div class="tead1">Youtube</a></div>
                </td>
                <td id="tum2" rowspan="2"  class="tum"
                        onmouseenter="this.style.backgroundColor='rgb(119, 147, 61)'; this.style.cursor='hand'; changeText2()"
                        onmouseleave="this.style.backgroundColor='rgb(180, 200, 141)'; restoreText2();"
                        onclick="document.location.href='http://www.nytimes.com/'"
                        New York Times
                </td>

</table>

My problem is that I would like to click on the sublinks: "Microsoft" "Zalando" or "Apple" without starting the onclick event because it opens a window and redirects the actual site on the sublink. However, the goal is that when a user clicks on a sublink that only the sublink opens a window. Additionally, if the user clicks on the purple or green area the mainlink "youtube" or "new york times" should be opened in the current frame (this is already be done). But as you see, there is a conflict between clicking the sublinks and the onclick event for the areas.

I hope that you can help me, for further information, please write.

Greets

Systematix Infotech
  • 2,345
  • 1
  • 14
  • 31
cimbom
  • 259
  • 1
  • 5
  • 23
  • This might help: http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute. Try to override the click event and just stop the default behavior. – Canttouchit Jun 10 '14 at 08:57
  • Thank you for your reply. When I use this:function changeText1(){ document.getElementById('tum1').innerHTML = 'Youtube

    Microsoft'; } Then it solves my problem but the red color, when I am on a link, disappears. I got only the black color, this means it remains static but the other links without the window.open are onmouseover red. Do you know a solution for this?     – cimbom Jun 10 '14 at 10:07

2 Answers2

0

are you looking for window.open ?

https://developer.mozilla.org/en-US/docs/Web/API/Window.open http://www.w3schools.com/jsref/met_win_open.asp

window.open(url,'_blank');
window.open(url);

working example code: http://jsfiddle.net/arjankuijpers/3tk2a/

Zezura
  • 128
  • 1
  • 9
  • I tried also window.open but as here, when I am clicking on, for example, Apple, it redirects me to the page from Apple and opens a new window. But it should only redirect me to Apple's page without activating the onclick event for New York Times. – cimbom Jun 10 '14 at 09:12
  • http://jsfiddle.net/arjankuijpers/3tk2a/ this works for me (safari), 1. i can open as a window. 2. as a new tab. – Zezura Jun 11 '14 at 21:04
0

Try this:

function changeText1(){
    document.getElementById('tum1').innerHTML = '<a href="http://www.youtube.com/">Youtube</a><br><hr><br><a onclick="window.open(\'http://www.microsoft.com/de-de/default.aspx\',\'_blank\'); event.stopPropagation();">Microsoft</a>';
}

This will open the URL in new page and event.stopPropagation() stop the onclick event in "tum1".

user77318
  • 80
  • 5