I have been racking my brain over this for hours and scoured the net with no solutions. I have a particular area of an image that I want, when the user rolls over it, to have some text to appear where the user rolled over.
I may be going about this all wrong, I don't know. I currently have a large image with five image mapped hot spots on it. In each spot, when a user rolls over the area, I want text related to what that area is to appear over the hot spot. At that point, the hot spot and text should be clickable to take the user to a specific page.
I have tried having the text hidden, then to appear when rolled over. But you can't roll over hidden text. I have tried to remedy that by allowing the div to be rolled over and the text appear at that point, but I couldn't get that to work either. I would like a CSS solution, but I'm not against using JQuery or JavaScript. Thanks for any help that can be given.
Update - I have the script working now. Thanks CuriousSloth for what you put up on JSFiddle. It took me a little while to incorporate it into what I had, but it worked. Anyone can go and view what I was talking about on the homepage of my Portfolio site: http://www.taranwilson.com
Thanks again for all the help guys.
CSS
.area {
opacity: 0;
}
.area:hover {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
Without JS: http://jsfiddle.net/pAmm4/1/
If you need a particular area to be clickable, not hover, you can use either JavaScript or :active pseudo-class in CSS.
Ideally you have different hotspot divs of a certain class and different ids.
When you hover over the hotSpot class, keep track of what id you hovered over and then reveal a div corresponding to that id. That div contains your clickable element.
Here's a live code sample of how you might do this-->https://sudonow.com/session/525cb5dc35e089113700000d.
I'm available over chat/live code editing to walk you through it.
Related
I have inserted a modal popup into my website. This is going to hold a image map that will act as the nav bar.
When this modal pops up I am keen for the rest of the website to "fade out" by reducing the opacity. I have already played around with body{opactiy:0.2;} but unfortunately this also reduces the opacity of the modal/nav image.
The long way round would be to change the opacity of every single element on the webpage, apart from the model, on a onclick....this seems like a difficult way to solve the problem.
Does a neater solution exist?
Thank you for taking the time to read my query.
My suggestion would be to have a semi-transparent overlay over BODY, and have the model sit on top of this overlay.
But if you would like a quick fix: *:not(#modal){opacity: 0.2;}
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I'd like to have it slowly fade instead.
There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn't seem possible with a submit button, since input elements don't seem to be able to contain child elements (ie. the other background sprites). Ideas?
I am not sure if this is what you are looking but take a look anyway
http://snook.ca/archives/javascript/jquery-bg-image-animations
DEMO: http://snook.ca/technical/jquery-bg/
anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.
$("div.submit").click(function() {
document.forms[0].submit();
});
add the css, for the mouse over
div.submit:hover {
pointer: cursor;
}
I don't know for sure but if you make the buttons container (a div sized to exactly match the button) you can give it a background image and then fade out the buttons opacity. Can you give an example of the two states you are trying to blend between? It would help give a more specific answer.
There is no consistent way to do this in CSS across all major browsers.
For something like that, you really want jQuery.
Here's a working jsFiddle that shows one example of how you can do this. Just update the fade var to change the timing of the fades.
is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks
This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.
It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.
You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.
I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.
So I have been playing with jQuery for a good time now and I'm trying to get an effect to work properly. I have a main square div in the middle of the page and when someone clicks a link I want the box to look like its falling off the page and disappear, revealing a new page behind it. I'v been playing with the easing plugin but I can seem to get what I want to work. Basically I have the div's top margin or just top distance increased to a large number. However, this just makes the div fall but it also expands my page and its just much lower on the page. I basically want the div to fall out of site and not change the dimensions of the site. Anyone know how to do that?
Thanks!
Danny
To prevent your page from redimensionning upon clicking on your link, add overflow:hidden to your div container 's css properties.
also, make sure you hide the div when the animation ends.
$('a').click(function(){
$('#thediv').parent().css('overflow','hidden');
$('#thediv').animate({'top': '+=500px', opacity: 0},function(){
$(this).hide();
});
});