pootleflump
Forum Replies Created
-
Hi bcworkz!
Just wanted to stop by and say thank you for all the help you gave. I got this working to the level needed, though I have to say there are still elements of your posts that go way over my head. I’ll keep working on my understanding of it.
Many thanks,
ChrisThanks!
Wasn’t able to figure out the Jquery as yet, but by looking into that I did get the document.getElementById you mentioned earlier running!
This worked on my test page but not on another site when I tried it. I am guessing this must be due to the theme resizing one of the images and throwing the image map out. If this is in fact the case, is there something I can add to my code below to lock the image sizes/locations<head> <style> .MapBackground { position:relative; top: 0px; left: 0px; z-index: 1; } .MapTransparency { position:absolute; top: 0px; left: 0px; z-index: 2; } </style> </head> <body> <div style="position: relative; left: 0; top: 0;"> <img src="http://localhost:8080/wp-content/uploads/2017/02/MapBackground.png" class="Imagemapbase"> <img id="switch" src="http://localhost:8080/wp-content/uploads/2017/02/MapTransparency.png" class="MapTransparency" width="700" height="324" border="0" usemap="#map" /> <map name="map"> <area shape="poly" coords="529,241,575,216,595,216,611,251,592,279,573,278,561,263,526,270,528,245" alt="Homepage" href="http://www.whereismycamera.com/australia/" target="blank" title="Go to Australia" onmouseover="document.getElementById('switch').src='http://localhost:8080/wp-content/uploads/2017/02/MapAustralia.png'" onmouseout="document.getElementById('switch').src='http://localhost:8080/wp-content/uploads/2017/02/MapTransparency.png'" /> </map> </body> </html>- This reply was modified 9 years, 3 months ago by pootleflump.
Ok, now have the following working.
If I can now change from the alert to a command that switches the image I will have basic functionality! 😛If I can do that I will be so stoked and can work on improving the code/method from there
<head> <style> .Imagemapbase { position:relative; top: 0px; left: 0px; z-index: 1; } .Imagemapoverlayswitch { position:absolute; top: 0px; left: 0px; z-index: 2; } </style> </head> <body> <div style="position: relative; left: 0; top: 0;"> <img src="http://localhost:8080/wp-content/uploads/2017/02/Imagemapbase.png" class="Imagemapbase"> <img src="http://localhost:8080/wp-content/uploads/2017/02/Imagemapoverlayswitch.png" class="Imagemapoverlayswitch" width="250" height="250" border="0" usemap="#map" /> <map name="map"> <area shape="rect" coords="188,180,233,224" alt="Homepage" href="http://www.google.com" target="blank" title="Go to Homepage" onmouseout=alert("Out"); /> </map> </body> </html>I’m going to start by seeing if I can get an Image map working with the overlaid image but if you have any ideas about the errors with the functions that would be awsome.
Thanks,
I found and have the following code working for positioning the images on top of one another.
<head> <style> .Imagemapbase { position:relative; top: 0px; left: 0px; z-index: 1; } .Imagemapoverlayswitch { position:absolute; top: 0px; left: 0px; z-index: 2; } </style> </head> <body> <div style="position: relative; left: 0; top: 0;"> <img src="http://localhost:8080/wp-content/uploads/2017/02/Imagemapbase.png" class="Imagemapbase"> <img src="http://localhost:8080/wp-content/uploads/2017/02/Imagemapoverlayswitch.png" class="Imagemapoverlayswitch"> </body> </html>I guess next up is to get the functions working and switch out the alert= for something that will change the overlay image.
With regards to the code posted earlier for the mouseover functions, in the browser console I get the following JS errors:
JQMIGRATE: Migrate is installed, version 1.4.1 localhost/:668 Uncaught SyntaxError: Unexpected token < localhost/:662 Uncaught ReferenceError: Imgmanip is not defined at HTMLAreaElement.onmouseover (localhost/:662) localhost/:662 Uncaught ReferenceError: Imgrevert is not defined at HTMLAreaElement.onmouseout (localhost/:662)- This reply was modified 9 years, 3 months ago by pootleflump.
- This reply was modified 9 years, 3 months ago by pootleflump.
In the mean time I will get the images organised as you recommend, a base, a transparent overlay, and an overlay with an element on, and look into how you go about displaying one on top of the other.
Thanks! 😀
I need to do a little debugging at his point as this code works:
<img src="http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png" width="400" height="148" border="0" usemap="#map" id="BaseImage" /> <map name="map" id="imagemap" > <area shape="rect" coords="14,12,388,137" href="http://www.google.com" target="_blank" alt="Logo" Title="Go to Homepage" onmouseover=alert("Over"); onmouseout=alert("Out"); id="targetarea" /> </map>Yet this code, which I would expect to achieve the same result, does not.
<img src="http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png" width="400" height="148" border="0" usemap="#map" id="BaseImage" /> <map name="map" id="masterimagemap" > <area shape="rect" coords="14,12,388,137" href="http://www.google.com" target="_blank" alt="Logo" Title="Go to Homepage" onmouseover="Imgmanip()" onmouseout="Imgrevert()" id="targetarea" /> </map> <script type="text/javascript"> function Imgmanip() { alert("Over"); } function Imgrevert() { alert("Out"); } </script>Any ideas why that might be?
Thanks for the input.
I am going to try and have to break this down into stages to get my head around itFor now I have managed to get mouseover/out actions to work when specified along with the area, (Just in alert for now) but when I tried to take this on and set them up and reference them as functions in a script I hit a wall.
Can you explain what I have done wrong?
Also I have looked to add id attributes to the image, map and area have I done so correctly?
Ill try and move things further along tomorrow but any pointers are very much appreciated
<img src="http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png" width="400" height="148" border="0" usemap="#map" id="BaseImage" /> <map name="map" id="imagemap" > <area shape="rect" coords="14,12,388,137" href="http://www.google.com" target="_blank" alt="Logo" Title="Go to Homepage" onmouseover=alert("Over"); onmouseout=alert("Out"); id="targetarea" /> </map><img src="http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png" width="400" height="148" border="0" usemap="#map" id="BaseImage" /> <map name="map" id="masterimagemap" > <area shape="rect" coords="14,12,388,137" href="http://www.google.com" target="_blank" alt="Logo" Title="Go to Homepage" onmouseover="Imgmanip()" onmouseout="Imgrevert()" id="targetarea" /> </map> <script type="text/javascript"> function Imgmanip() { alert("Over"); } function Imgrevert() { alert("Out"); } </script>- This reply was modified 9 years, 4 months ago by pootleflump.
- This reply was modified 9 years, 4 months ago by pootleflump.
Hi again,
As a quick follow up I looked at ID attributes here
W3Schools.comBelow is the demo code they show and my attempt a modifying it. Clearly it doesn’t work but I would love to know about all of my mistakes.
<p id="demo">Click the button to change the text in this paragraph.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; } </script> <img src="http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png" width="400" height="148" border="0" usemap="#map" /> <p id="Overlay" >img src="http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png"</p> <map name="map"> <area shape="rect" coords="14,12,388,137" href="http://www.google.com" target="_blank" onmouseover="myFunction()" /> </map> <script> function myFunction() { document.getElementById("Overlay").; } </script>The first must be in the id itself as the following simply shows as text in the post:
http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png- This reply was modified 9 years, 4 months ago by pootleflump.
Hi bcworkz, Thanks for the response.
I had tried this amalgamation of the code
<img src="http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png" width="400" height="148" border="0" usemap="#map" /> <map name="map"> <area shape="rect" coords="14,12,388,137" href="http://www.google.com" target="_blank" onmouseover="this.src='http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest-2.png'" onmouseout="this.src='http://localhost:8080/wp-content/uploads/2017/02/Facebook-Banner-Javatest.png'" /> </map>But assume that the onmouseover= does not function, as you say, because there is no IMG SRC defined within the Area tag for the this.src= instruction to work with.
My images are of the same size and will work with the same Imagemap/AreaTag so I’m guessing I can achieve my desired result by swapping the displayed image.
Alternatively (And perhaps even preferably) I could achieve what I am after by displaying the second image (of identical size as the first but as a PNG with an Alpha channel/transparency) over the top of the original.
I imagine in every instance I will maintain images of identical size and which all work with the image map.
I will see if I can figure out how to assign an ID attribute
If I am starting to have to us JavaScript am I right in thinking I will then have to write and add these scripts elewhere in the sites code to do so, or is it feasible to do this simply via code within the text of this specific post?
Many thanks,
Pootle