I have facing to draw an image map with menu bar hover effetive like URL : http://www.99acres.com/paras-seasons-sector-168-noida-npxid-r6378e
The matter is when I hover on menu it highlight also a portion of image alternately When I hover a portion of image it also highlight menu.
I believe you are looking for the answer that this post provided in partial: Link the hover state on two elements. One of the provided fiddles provides example which I used
in my codepen for you with the method of linking two elements: http://jsfiddle.net/LN2VL/24/
Now, it is not clear exactly what you need. The "linking" of elements is provided by the code:
$('#Room3Pic').hover(function() {
$("#Room3").trigger("mouseover");
}, function() {
$("#Room3").trigger("mouseout");
});
$('#Room3').hover(function() {
$('#Room3Pic').css('background-color', 'purple');
$(this).css('background-color', 'purple');
}, function() {
$('#Room3Pic').css('background-color', 'white');
$(this).css('background-color', 'white');
});
Here's my modification of the code that may be more suited to your needs.https://codepen.io/pkshreeman/pen/dRvbZG?editors=1010
That is assuming you already have the image mapped out and can add either class or id to each 'map' so that you can link them together. If you need help with that, then I may suggest you take a look at Using JQuery hover with HTML image map for ideas how to map out your images.
Related
First: This is a brilliant website: http://www.r2d3.us/visual-intro-to-machine-learning-part-1/
Second: I'm trying to reverse engineer how they did the graph under "Making Predictions" (the one with the falling balls and tree chart). At first I thought it's D3 but looking around, I didn't see anything to indicate it is. Plus, I'm wondering how they made the balls follow the path.
Can someone please walk me through the process of creating that graph? I'm trying to learn visual data design and have quite a way to go :)
Link animation motion to the scrollTop property of the DOM. There are two chunks of code that makes this work. An event handler that records scroll position:
container
.on("scroll.scroller", function() {
newScrollTop = container.node().scrollTop
});
And then the render code:
var render = function() {
// Don't re-render if scroll didn't change
if (scrollTop !== newScrollTop) {
// Graphics Code Goes Here
}
window.requestAnimationFrame(render)
}
window.requestAnimationFrame(render)
For more information on this technique, I highly recommend the following link, which was written by the author of the link OP has shared:
https://bl.ocks.org/tonyhschu/af64df46f7b5b760fc1db1260dd6ec6a
I think what I am asking is impossible, or at least so complex/hacky it would not be worth it-but in case I am wrong...please let me know.
I have a series of 4 kendo dataviz bar charts, each representing the same set of objects, each chart graphically displaying one property of the objects. What I would like is if a marker on one chart is clicked (so that object is "selected"), to highlight this object's marker on the other 3 charts. See pic for example:
I have looked through the Kendo Dataviz website/docs, inspected the SVG markup, and looked through the object returned on the series click (in Visual Studio), but haven't found anything that could be used to accomplish this. The one thing I have come up with is redrawing all the charts with the selected item "marked" within the data array so when it is redrawn, that item can be redrawn with a different color...but I'd like to avoid redrawing all the charts each time, if possible.
Does anyone have any suggestions? I would greatly appreciate ideas, the least complex the better. Thanks so much!
The closest way I know of achieving this without a redraw would be to use the axis selection property as a selection slider with a restricted width to one column range and prevent resizing. This would simulate a selection highlight without redrawing.
You can also use plotBands property on the CategoryAxis. This is how I am doing it:
$("#chart").data("kendoChart").setOptions({ categoryAxis: { plotBands: [{ from: index, to: index + 1, color: "#ffd0c0", opacity: 0.4 }] } });
i am using the declarative/ui-binder method of adding images to a page. this is in combination with using the ImageBundle functions that GWT provides.
what i would like to do is change the image out when i hover over the image. my questions are: what are the best way to do this, and is my current method the best method in the first place?
my code looks something similar to:
<ui:with field='res' type='path.to.my.app.AppResources' />
...
<g:HorizontalPanel ui:field='horizPanel' >
<g:Image ui:field='image1' resource='{res.image1}'/>
</g:HorizontalPanel>
that is then tied into an ImageBundle class via the AbstractImagePrototype.
then, in my main handler, i have something like:
#UiHandler("image1")
public void onMouseOver(MouseOverEvent event)
{
/* What do I do here? */
}
say i want to replace image1 with image2 when the user hovers over image1 (and put image1 back when the pointer leaves the image). do i replace the image1 object? do i use the setUrl function for that image? do i create a whole new image, and use the add/remove functions for the horizontal panel to add it on? that seems awfully inefficient. do i not even need an ImageBundle; can i add images via something like <g:Image .... url='path/to/image1.png' /> and then use CSS and the hover attribute to swap out the image?
some guidance would be great. the GWT documentation is seriously lacking in this area. thanks.
PushButton is good for this kind of behavior. You can go father than :hover - you can specify arbitrary html and widgets for different faces of the buttons.
See gwt pushButton in UiBinder for an example in uibinder.
There will be more overhead in this approach, since it does register mouse handlers and set up a whole widget - if you really only need the rollover image and not any other event handling, a :hover css selector (maybe with a #sprite?) is probably best.
Using mouse handlers here seems a little overhead. I would use css and the hover selector
.foo {
background: url('path/to/image1.png');
/* height, width, etc. */
}
.foo:hover {
background: url('path/to/image2.png');
/* ... */
}
then use a widget that renders a div element (e.g. SimplePanel) instead of an image and set the style foo as stylePrimaryName
<g:HorizontalPanel ui:field='horizPanel' >
<g:SimplePanel ui:field='image1' stylePrimaryName='foo'/>
</g:HorizontalPanel>
I am looking for a Jquery image gallery which have vertical thumbnail like at the following page.
http://realtyexecutivesofnewyork.com/product_detail.php?ml_num=2275875.
Can anybody point out me to something similar jquery solution.
In my opinion, jCarousel is by far the best plugin for this sort of thing, this is what you want
If you need a hand setting it up, just shout.
The site you are referring uses, a vertical menu scroll plugin
perhaps this one.
and the code is somewhat like this
$('.myMenu').scrollIt({
scrollDuration : 250,
scrollItwrapper : 'myMenuScroll'
});
});
And on clicking that link, it just changes the src attribute of img element, and loads the image (No wonder if your internet connection is slow, you will see that image take a lot to load).
You will find more better at here.
Does anyone know how to use the Pixastic plugin and jQuery to where I could have an image fade from color to completely desaturated?
I am trying to avoid saving out two images and fading one out..
i did the inverse... having desaturated images fade in to color. achieved w/ only 1 image in conjuction w/ pixastic and livequery. i basically cloned the images, desaturated one of the copies, and stacked them on top of each other.... fading the top (desaturated) layer out on hover. i'm sure it could be more elegant, but it mostly works. you can see the effect at chicagointerhandball.org on all the "sponsor" logos
$('.sponsors').load(function() {
$('.sponsors').pixastic("desaturate");
}).each(function(index) {
var clone = $(this).clone().removeClass('sponsors').addClass('sponsors-color').css('opacity',.25);
$(this).parent().append(clone);
});
$('.sponsors-color').livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this).hover(function() {
$(this).stop().animate({"opacity": 1});
}, function() {
$(this).stop().animate({"opacity": 0});
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
Since all those pixastic image effects are generated on the fly I don't think it would be feasible to fade between saturated and desaturated. The saturation level of the image would have to be redrawn at each step of the fade. Your best bet would probably be to have two images, one saturated and one desaturated, and have them placed on top of one another. Then when you hover over one, fade in the other image.
Edit:
Just saw that you were trying to avoid having two images. Well, that's the only solution I can think of but I'd love to see if there were others. Depending on how many images there are, you could generate all the desaturated images on page load, place them on top of saturated images, hide them, and then fade them in on hover. Just a possibility.
you could get the best of both worlds by dynamically creating a duplication and desaturating that image with pixastic. Position the new desaturated image under the original and fade the original out.
You should be able to, it is in their jQuery documentation section.
// convert all images with class="photo" to greyscale
$(".photo").pixastic("desaturate");
Looks like this is possible with the canvas element.
With this you need to mix jQuery and the standard DOM calls. I was having the same issue just today about this. I couldn't get the hover to work cross platform from the examples given here and on their site. So I decided to think for myself on this one. Came up with a solution, hope it works for you:
http://you.arenot.me/2012/03/26/pixastic-desaturate-on-mouseover-mouseenter-mouseleave/