I have an image, and I would like to divide it into different sections. When the mouse is hovered over each section, I would like that section to be highlighted with a red box and a text box of some annotations appear. Is such a thing possible?
For example, if the picture is some buildings side by side, when I hover over the middle building, I would like a rectangle to appear over that building, and a panel to appear with some text information.
If this was a graph, I know could do it using plotly. But it is not a graph, just an image. Can something similar still be done in python or will I have to switch to HTML/CSS/Javascript (which I am not familiar with)?
As a starting point, I have used Pillow/PIL to create the red box at specific sections, but this does not address the interactive component I want.
Any advice for a relative beginner is welcomed.
Related
So I'm making some sort of interactive map for a roleplaying game I have, where I want to be able to hover a country and it can scale up a bit and have a hover effect and so you can be able to click on it and it will give you main info of the country and stuff. Now the issue comes that I'm trying to check if there is a way to have multiple PNG layered up on HTML, CSS, JS and avoid having the transparent background of the top layer hover only that specific one. I'm trying to check if there is a way for the code to detect only the colored area of the img or if this is not possible.
I've tried layering with the z-index, but that doesn't really resolve the issue.
If possible, I am trying to create something like the below using just HTML, CSS, and Javascript. I know that the carousel below was built in React but I am not using that nor am I familiar with it. This carousel stretches across the whole screen but it looks like the picture(s) only takes up 65-75% of the width (highlighted in blue) and then the rest is a black box that never changes even when the pictures do. There are words that also overlap the black box and picture. The picture also has some gradient over it on the left side so that the black box nicely fades into the picture.
I am currently using a slideshow/carousel script from W3Schools (https://www.w3schools.com/howto/howto_js_slideshow.asp). I do not have bootstrap with this project either though I may be able to add it if needed. I tried dividing my container into columns so that one side could be 40% black and the other 60% could be the slideshow but that didn't work.
Sorry, I am still pretty new to all of this! Does anyone have suggestions on how to add a carousel kind of like this one without React (and preferably bootstrap)?
I have a s-d issue with Jodit (which I much like!). The two leftmost standard toolbar buttons "grow" with a large screen, and thus cause the toolbar to occupy the whole space above the text area (align=even, kind of). .
The text area is in div which is again wrapped within another div with "d-flex". Perhaps someone has come across this?
I have an image and I want to restrict the clickable area on this image. I want user to click only particular area. I want to obtain a darker view out side of this clickable area. How could I achieve this usin java script and/or jquery.
Kind regards
There are many ways to implement the clickable area:
using image map :
http://en.wikipedia.org/wiki/Image_map
Take a look at this website : http://odyniec.net/projects/imgareaselect/
or using divs and z-index.
It might be difficult, but if you use a to determine a clickable area first, you can use jquery to do something like this:
On hover over the mapped area, Show a transparent black div, the same size as the image. (This makes the image darker)
Place another div on top of that, with the same dimensions as the image. (this contains the small map-sized container for the new image)
Place another div INSIDE of the last to be the same size and position as your mapped area. (This will contain the original image - not darkened)
Place the image again INSIDE of the last div and position it so it lines up with the original image.
This should show something like what you're talking about.
If it's more complicated than this, I'm sure we will ALL need an example and all of the outcomes of these images. I don't think there's enough detail to give you a real answer.
I have some graphs on my page. When the user drags his cursor over the picture, I'd like to show a horizontal line over the graph.
The one above is the starting point and the latter shows what should happen when the user points his cursor over the graph. The line should stay on the same level with the cursor, when it's over the image.
Is this possible with Javascript, for example?
It is, you need e.g. a div box positioned at cursers Y value with 1px green border. Position has to be set to absolute. But you can't paint directly in the image.
You can use D3, and based on svg, to draw the graph and the hover line , you could add other graph component to interact as well such as a slider bar to select sub interval to enlarge, changing labels etc.
Take this as an example to develop:
http://mpf.vis.ywng.cloudbees.net/
(you can drag the yellow bar, and click the legend; for source code, click fork me on github)