Jump to content

Lorne

Members
  • Content Count

    13
  • Joined

  • Last visited

Community Reputation

0 Neutral

About Lorne

  • Rank
    Newbie
  1. Many thanks - got it working now. Initially I did not realise you left the map code in but were not using it, however with a slight tweak to get the tip to show above the area which fires it (using em since the text does not scale and distance depends on number of lines of text in the tip) I have it working off my CSS with this sample code. I did not set any ID's as it seems to work OK as is: <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>Image Maps</h2> <table style=" max-width: 640px"> <tr> <td> <div class="tooltip" style="left: 22%; top: 15%; right: 70%; bottom: 75%"> <span class="tooltiptext" style="top: -3.8em">Tip 1 long sample text to test word wrap</span></div> <div class="tooltip" style="left: 62%; top: 45%; right: 20%; bottom: 40%"> <span class="tooltiptext" style="top: -2.5em">Tip 2 short text</span></div> <img alt="Image not found" border="0" src="Timer2.gif" width="100%" height="auto"> </td> </tr> </table> </body>
  2. The image scales both height and width inside a table set for max-width equal to the image size so it never grows bigger than its native size but shrinks with the aspect ratio constant. Here is my actual code right now for the first tooltip only to make it easier to read (note I took the left and top out of CSS to make it easier to see left/top values against the tip): <table style=" max-width: 844px" cellspacing="1"> <tr> <td> <map id="FPMap0_ID" name="FPMap0"> <div class="tooltip" style="left: 2%; top: -18px"><area shape="rect" coords="30, 41, 93, 68"> <span class="tooltiptext">Menu options here let you set a bias for teaching purposes</span></div> </map> <img id="FPImg0_ID" alt="Image not found" border="0" src="Images/MainView.gif" width="100%" height="auto" usemap="#FPMap0"> </td> </tr> </table> If I change top to a % value the tip always appears fixed to the top of the image.
  3. Thanks for that - it was a partial success. The left value scales with the image but the top value is fixed at the top of the image regardless of any % value. Also tried using bottom but the same thing. Maybe this is because the image is scaling with width 100% and height auto but that is the only way I know to zoom the image and keep the aspect ratio.
  4. I have written a CSS custom tooltip that shows a number of tips as the cursor moves over an image based on an area map. All works fine on a computer but when viewed on a phone/small tablet the image is resized to fit the screen. I have written some code to resize the area map to fit the resized image but can't find a way to get the tip to show at the cursor position - as a temp measure I have hard coded the tip popup position for each tip. Can anybody help ? I create the tip with this code: <div class="tooltip tt1"><area shape="rect" coords="34, 66, 64, 89"><span class="tooltiptext">Tip text goes here</span></div> Base info for tooltip and tooltiptext is in my css file and modified by tt1, tt2, tt3 etc to position each tip, the code for which is: .tooltip.tt1{ top: -1.5em; left: -12em; } .tooltip.tt2{ top: 1.5em; left: -12em; } .tooltip.tt3{ top: 6.5em; left: -9em; } etc.... Ideally I want to get rid of tt1,tt2,tt3 etc and have top and left dynamically set at the cursor position in the tooltip css code or somehow passed to the tooltip when it shows so the tip is correctly positioned when the image is resized.
  5. OK - solved it. You have to use the full file path from the web server root to the image rather than the relative path from the folder with the html code to the folder with the images. This function now works.
  6. In case anybody else wants to do this I have solved it. You need to put code at the start of the function OpenTarget that does this: if (pageName == "Home"){ document.getElementById("Home").innerHTML = document.getElementById('Home').innerHTML; }else if … etc for each page where you have links that change the contents of the initial page..
  7. Thought I had better add that I also tried (without success) just loading the first image with onclick executing the following code via ChangeImage('Images/GraphFilter.gif'): function ChangeImage(imgName){ var image = document.getElementsById('mygraph'); image.src = imgName; }
  8. I have several images that show different results of an event. I want my page to load with image1 visible, the rest hidden, and the user to be able to click text under the image to hide what is visible and show another image in its place. The image is in a table but does not have to be. This is my failed attempt to try and get it to work with 2 images: in my html body: <table style=" max-width: 792px"> <tr> <th> <img alt="Image not found" id="mygraph" border="0" src="Images/Graphs.gif" width="100%" height="auto"> <img alt="Image not found" id="myfilter" border="0" src="Images/GraphFilter.gif" width="100%" height="auto" style="display:none"> </th> </tr> </table> <p>Click <a onclick="SwapImage()" href="#">here</a> to swap image</p> and the javascript function executed by the click: function SwapImage(){ document.getElementsById("mygraph").style.visibility = 'hidden'; document.getElementsById("myfilter").style.visibility = 'visible'; } but the javascript does nothing. I also tried display instead of visibility none or block with no success. The first image shows up with the second hidden but does not change when clicking the text. Can anybody help ?
  9. OK, I have given up and removed the links from the pages that appear in the contents area so I have a working site. If anybody does know how to create a link in a area contents page that will click a button in the menu I would be grateful for the info as this would improve the usability of my site. I can write a script in the index page that will click a menu button but that script does not work from any other page, presumably because the scope of other pages does not extend to seeing the code in the menu index page.
  10. You are not doing what I said in my post. If you just click the menu buttons it works fine. It fails if you click a link on the web page that is showing in the contents area to the right of the menu and then try to get back to the original page by clicking a menu button.
  11. The link to the test site is: https://www.cantab.net/users/bridge.analyser/Bridge/Files/ If you press a link in the contents area of home page (ie not the menu link but the html link in the text of the contents page) like 'print options' it opens the print option page but if you now click the home item in the menu it stays on the print options page. Also if you go to another page in the menu and back to home it reloads the print options page. Note the links to download files are not set up on this test page. If you want to see the original web page using frames go to https://www.cantab.net/users/bridge.analyser/Bridge/ I am using <iframe> because that was the only way I could see to get the tab menu to load a web page in the contents area.
  12. I am converting an old frames based web site to use a tab menu but can't solve an issue. I create a menu based on button images with the code: <div class="tab"> <button class="tablinks" onclick="OpenTarget(event, 'Home')" id="defaultOpen"><img alt="Home" src="Images/Home.gif"></button> There are 9 buttons and each one displays a web page in the tab contents area with code like this: <div id="Home" class="tabcontent"> <iframe src="home.htm" style="width: 100%; height: 100%" target="_self"></iframe> </div> and I display the web pages with the following scripts taken from this site: <script> function OpenTarget(evt, pageName) { var i, tabcontent, tablinks; // Get all elements with class="tabcontent" and hide them tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent.style.display = "none"; } // Get all elements with class="tablinks" and remove the class "active" tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks.className = tablinks.className.replace(" active", ""); } // Show the current tab, and add an "active" class to the link that opened the tab document.getElementById(pageName).style.display = "block"; evt.currentTarget.className += " active"; } Each of the iframe web pages contain links to other pages that display in the contents area as I want and all appears to work except when I try to get back to the initial page (ie Home.htm in the above code for the first button). It seems that pressing the tab button after a new page has been opened by a link in Home.htm just reloads the new page rather than executing the iframe code to reload the initial Home.htm page. Even if I go to a new tab and back to the first I get the new page and not the initial one. The only way to get back to the initial page is to use the browser back button which is not ideal. What do I need to change so that pressing any tab button always displays the initial page referenced by the iframe code rather than any other page that has been loaded by following links in the initial page ? Thanks in advance for any help you can give me.
×
×
  • Create New...