I've created an image map, and then put a youtube video with a
<div style="position:relative;top:-400;">
because I want it to display over the image. Then I have another Image I want to display below that, but it displays below where the video would have been, and if I use top:-400 to move the image up, it works, but some invisible field is blocking me from clicking parts of the image map.
The solution was to use 'margin-top' instead of 'position:relative;top:-400px;'
This does keep the space of the original position.
Related
I'm fiddling around with this 3D object viewer for my website, I want to embed the viewer in my website, but it pops up on the page way too big.. Can some one tell me how I change the scale of this div?
<div id="fyu_9y1p82ic59" class="fyu_container fyu_vertical fyu_nomax"></div><script src="https://fyu.se/embed?v=3.0"></script><script>FYU.add("9y1p82ic59", "fyu_9y1p82ic59", {autoplay:1});</script>
Now I tried changing the div height, but this doesn't change the size of the actual player, it just cuts off the entire bottom part of it. How do I fix this?
Click here for picture
What I am trying to do is similar to an image map - in reverse. I have a large image (over 2000x2000) and want to give links to coordinates on the image. There are items in the image that I would like users to be able to jump directly to with having to scan over the whole image manually. Is this possible with either CSS or HTML by adding links to coordinates or adding anchors to the image? I would use js if that was an option as well.
Interesting. The notion of jumping to a position on a web browser window is limited in general. Here are some general possibilities, without specific implementation details:
You could treat it as a sprite image, and use JavaScript/jQuery to change the image coordinates so that the point of the image you are interested in moves to the the top left of a div positioned on the page. But the portion of the image above and to the left of that point would not be visible.
You could define it as a background image in a div, and define an invisible table or invisible fixed-position divs within that div, and link to specific divs or cells in that overlay. In this case, a y-coordinate in the image where the div or cell is positioned would probably move to the top of the browser window, but horizontal positioning would be problematic. If the div or cell you target is off the screen to the right or left, the page would shift to expose it, but I don't thing that you could guarantee where the specific x-coordinate would be positioned. Also, if the target is near the bottom of the web page, that target point will not move to the top. But this solution wouldn't require JavaScript/jQuery - it would just mean linking to element ID's on the page.
This is almost the same as #2... You could overlay the image with divs and/or a table at higher z-levels, and link to those divs or table cells.
You could use JavaScript/jQuery to position a fixed-size div with visible borders so that its upper-left corner is at the position in the image that you are interested in. I think you'd still have to link to that div in order to make sure that it is visible in the current viewport.
You should be able to lay out a form over the image and move the cursor to fields on the form. I think that the form could be transparent so that the cursor appears to be moving around on the image. But you'd need be confident that the data entry cursor is sufficiently visible on top of the image to be useful.
I am trying to create an image map where there is one main image, and when you hover over certain areas different images come up.
Something like this How to apply Hovering on html area tag? but instead of creating an outline it would show different images.
I do not want to usse jQuery and would prefer to rely on CSS and HTML.
Thanks in advance.
You could cover smaller blank images over the large main image and use the hover code separately for each image
The non hover image is a "blank" png and the hover is the desired result
Just use the code for each "blank" image with the main image in the background with z-index of "0"
As said in previous answer, you could do this by using the z-index property. But try setting the main image's z-index as 0, and all small images(that you want to show over main image) as lower than 0.
And finally, activate by swapping the z-index between values lower or higher than 0 on mouse hover.
Hope this helps :)
I am using AngularJS to create a new table (with ngRepeat) when I receive new data via Ajax.
Part of each table row is an image.
Under certain conditions I want to display an overlay image (which is mostly transparent except for an icon indicating the condition) right on top of the main image.
I am currently using a js solution by assigning a handler to the load event of the image (obtaining the position of main image and setting overlay image to the same position).
That works but I have to use $apply to make sure all images are constructed in the DOM before I can attach the load event.
I was wondering if there is a pure html/css solution to the problem?
Simply make sure the overlay image is always in the exact same position as the main image.
The I can simply bind ngShow to the condition and avoid all js tricks.
ETA:
here's the relevant code snippet from the table (within the ngRepeat):
<div class="movie-cover">
<img class="movie-image" ng-src="{{movie.ImageUrl}}" onerror="this.src='#Url.Content("~/Content/images/titleimages/NoImage.jpg")'" />
<img class="selected-image dontshow" src="#Url.Content("~/Content/images/Selected.png")" data-hh-id="{{movie.ID}}" />
<a class="movie-link" href="{{movie.ImdbUrl}}" target="_blank">IMDb</a>
</div>
I want the image with the class 'selected-image' on top of the other one.
give this a try:
.movie-cover {position:relative;width:400px;height:400px;}
.movie-cover img {position:absolute;top:0;left:0;}
Well, one idea is that you can load first image as a cover background to a div and load second image inside that div with height:100%.
Edit
I realise this would also require js as you are loading it via ajax.
Second idea is that you can place both images inside same div with height 100% with absolute position and top, left set to 0 relative to parent div?
I have a div inside a webpage, below that div there are some images that you can select.
When you select an image you can place it inside the div by clicking on the div.This is working fine.
When someone puts some images inside the div and is done with it, I would like it to be able to save the content of the div, so to save all the images on the position as they were placed, and to merge it into to one image.
Is this possible if so, how could I do something like that?
At the moment I place the images with jQuery inside the div.
Make one image of it is more complicated, you might wanna check http://html2canvas.hertzen.com/ for that. You can also use a canvas.
You can create a canvas, then draw images onto it, then convert to an image and save. This might help. It will only work in browsers which have canvas support.