I had a quick search for this problem and couldn't find anything that satisfied both parts so I hope this is ok to ask:
I am creating an interactive map which has an aerial image of a location as a background, with small icons overlayed over the top. These icons, when clicked should open a popup window with images or videos that have been taken in those locations, much like a google map.
I have found code to allow me to layer images over each other here:
Html Image over image
And I have found code for a popup here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
And I can get both of these elements to work separately on my webpage, however I'm stuck as to how to combine them so that the image I have overlayed can be clicked on to trigger a popup.
It's been a while since I have coded in HTML and I can usually handle these kind of challenges but I'm finding myself a bit out of my element here.
Thanks!
Related
I am cloning https://www.sovereignselfdefense.com per request from the owner. To create a Wordpress site. The site that is currently up is a Kajabi site. I have downloaded all images from the Kajabi site by simply right clicking the site and clicking download. I made the Wordpress theme and the images that did not download (shown with arrows) display fine in the custom wordpress theme.
All images, except these images in the CTA (for example, the gentleman with his arms out) are downloaded.
The client is transferring from Kajabi to Wordpress. I am afraid that the cloned wordpress theme is getting these images from the Kajabi site and, when said site is taken down, that I wouldn't be able to get these images. The Wordpress theme works, and displays these images for now.
I used Google Chrome Inspect Elements to try to find what this image is, and how this image is displaying. I am confused.
I'm requesting some tips on how to identify how the site loads these images in the CTA, so I can download them and link the wordpress theme's html accordingly. If someone could teach me how to identify one image, I believe I will be able to identify the rest of the images. Thank you for helping out.
In the inspect you can see the html code there is style expand it and you can access the background image's URL.I have just highlighted in the images.
They have attached a style block before the parent div of any container which has a background image just expand that style tag and get the image.
Image-1:
Image-2:
Image-3:
Image-1: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/tzJ4ad46RcSJinm7qbnO_Edited-image.png
Image-2: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/qqHvByszR1iu2rvfEQwg_defending2.jpg
Image-3: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/AWzmDDsWTlKOdoWPatUA_SovereignSelfDefenseBrandingPhotography-59.jpg
By clicking the image if you can drag it directly to your desktop that means that image is used by
<img src="">
tag in the code. Either it's used through css.
For your code please check the css file and you will get the image use as "background-image:url()" or you can check through inspect element section by section.
If you are using Google chrome then you can download and install this cool extension.
I'm a Gentleman
Here is the description from that link.
Easily save images with a click, gestures or the extension button.
Save images with one click by using the alt + click hotkey (holding the alt key and clicking the image).
Or save images by dragging them (drag the image slightly on any direction).
Download every image on the page by using the extension button (green button on the top right).
Note: The images are downloaded in the default directory for downloads of Chrome.
Installation Note: After installing, Chrome doesn't add any extensions to the currently opened tabs (so, you have to reload the tabs that were opened before the extension was installed to work it to work on them).
Also, you can inspect the page. below is the step on how to access inspect Element.
Right-click anywhere on the webpage, and at the very bottom of the menu that pops up, you will see "Inspect." Click that.
Click the hamburger menu (the icon with 3 stacked dots) on the far
right of your Google Chrome toolbar, click More Tools, then select
Developer Tools.
Now if you want to find out the image you can simply find it by clicking CTRL+F and type like .png or .jpg any other extension that you want to find.
Here is the example.
You can click right click then click save image as and when you are saving it.under the name you will find the type.
Some websites make it almost impossible to get the image. I remember trying to save a background theme image from the old gmail.
If you find yourself in that situation, open the Developer Tools, go to Network, filter by Images then sort by Size descending, so you get the biggest image to be the first one, then hover over each file to find your image.
You want to sort by the file size, because most of the times, the big background images are the largest in size.
Just checked out your website out..
Image 1
You can find this right below the line where the section id is 1574286919067
Image 2
Similar to the first image, this is under the section 1589827030126
Image 3
Once again, under section 1589828889742
Hopes this helps you out.. Let me know if you want to have anymore queries about the same.
The images itself:
-> Image 1: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/tzJ4ad46RcSJinm7qbnO_Edited-image.png
-> Image 2: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/qqHvByszR1iu2rvfEQwg_defending2.jpg
-> Image 3: https://kajabi-storefronts-production.kajabi-cdn.com/kajabi-storefronts-production/themes/2031124/settings_images/AWzmDDsWTlKOdoWPatUA_SovereignSelfDefenseBrandingPhotography-59.jpg
Doing a big part of work around html image maps and suddenly I am not able to edit image maps:
- when clicking on an image with map edit tool, it adds the first point, but then focus is lost and 'multiple CSS p-elements' are selected, so I am not able to create any shapes, but adding single points only.
Dreamweaver can only make image maps for images with position:static
Google created new project based on javascripts. http://hyperlapse.tllabs.io/
Engine creating timelapse video but not generating it as visible video file.
How to get it? Only save from screen by desktop video grabbers?
Ok, I found a way, but its complex.
fist things first though, it wasn't actually made by Google, but by T+L labs using the Google Maps API and JavaScript.
Now, to the interesting part:
You're right when you say that there is no pre-made way to save the output video, so you have to mess around with the source code (to remove the overlays) before using screen capture.
What you will need:
Google Chrome
Screen capture software
Windows Live movie maker
Steps:
First, create your hyper lapse like you normally would.
Once you are ready to export, open 'inspect element' (in most browsers the default key is 'F12')
A window with lots of text should pop up. drag the edge out to enlarge the window.
Move your mouse down over the coloured text. As you do this, different parts of the page should highlight themselves in blue one at a time.
What you are seeing is an automatic system; when you hover your mouse over the code for an object on the site, the browser highlights it for you!
Move the mouse around until you find the section that highlights the scroll-bar at the bottom of the page.
Click once to select it, then press delete. The scroll-bar should vanish.
Repeat steps 6-7 for all the other things on top of the hyper lapse itself.
You should now have a clear space to record!
Finally, before you record, press 'F11' to maximise the window, removing the navigation bar at the top.
Activate your screen capture and record the hyper lapse through (Note: make sure the mouse cursor is off-screen whilst you capture)
Press 'F11' again to regain the navigation bar, and then 'F5' to refresh the page and get the removed objects back.
Use Windows Live movie maker to edit the capture down to the correct section, then export as a high quality film.
You're done!
I was wondering how you on a website make an info button for images. Like after you click the info button, there is a box beside the mouse telling you what image your mouse is hovering over. This would be for this website: http://108.171.192.123:8123/ . I want (on the click of a button) for it to tell you what block is what.
Note:
- the several images can't be made into a bit map
- any code snippets that might help are useful
- any website language I will accept (e.g. I can learn it if I need to).
- huge thanks to those who answer.
- the website is a map of my minecraft server (it will be blank ATM tho)
Dynamic MouseOver effects are achived by using JavaScript. I would recommend to learn jQuery, a widley used JavaScript library, which allows to animate your static html.
I'm dynamically generating an imagemap for a chart tool I have.
I was hoping to be able to set a border or color on the area tags so I could check everything was being generated with the right coords, but a little research shows this is not possible.
So whats the easiest way to check my image map is correct? Are there any browser tools which will "visualise" the areas?
What about using JavaScript (and jQuery) to test it?
http://davidlynch.org/js/maphilight/docs/demo_usa.html
This plugin will highlight image map areas.
You can use FireBug for that:
Right-click your image and choose "Inspect Element with FireBug"
In the HTML tab of Firebug, the image tag is highlighted: locate and expand the associated map tag, which usually is right after it
You can now place your mouse over each area tags to see them highlighted over your image
One way to visualize an area tag in Chrome is to add a tabindex to the area tag(s) you want to see, and then click or tab to it. Chrome will nicely highlight the actual outline of the clickable area.
This solution unfortunately doesn't work in Firefox.
Image Map Editor is a plug-in for Firefox. It is the best tool I have found so far, makes creating, inspecting, and editing image maps very easy.
In Chrome you can select the area of the image map and click on the three little dots
to the left and then select "focus"
Never thought I would ever say that, but this is one of the few cases where Dreamweaver could be helpful. You'll have an interface, you will be able to work with anchor points and set your imagemap easily.