Change Image Endpoint on mouseover

[Poki]

//jsPlumb code
...
jsPlumb.Defaults.Endpoints = [ ["Blank"], ["Image", {src: "/images/
arrow.png"}] ];
...


//change color of connector and windows on mouseover
$("div.window").mouseover(function() {

var vertexid = $(this).attr("id");
var dest = jsPlumb.getConnections({source: vertexid});
var src = jsPlumb.getConnections({target: vertexid});

for(var i = 0; i < dest.length; i++) {
dest[i].setPaintStyle({strokeStyle: hoverEdgeColor, lineWidth:
hoverEdgeWidth});
}

for(var i = 0; i < src.length; i++) {
src[i].setPaintStyle({strokeStyle: hoverEdgeColor, lineWidth:
hoverEdgeWidth});
}

}).mouseout(function(){

var vertexid = $(this).attr("id");
var dest = jsPlumb.getConnections({source: vertexid});
var src = jsPlumb.getConnections({target: vertexid});

for (var i = 0; i < dest.length; i++) {
dest[i].setPaintStyle({strokeStyle: DefaultEdgeColor, lineWidth:
DefaultEdgeWidth});
}

for (var i = 0; i < src.length; i++) {
src[i].setPaintStyle({strokeStyle: DefaultEdgeColor, lineWidth:
DefaultEdgeWidth});
}
});







Have someone an idea, how to change image endpoint on mouseover?

In jQuery-Snippet I've got all connection of the window, when the
mouse pointer enters this window.

How can I get an instance or array of Endpoint?

I would like to change image to


jsPlumb.Defaults.Endpoints = [ ["Blank"], ["Image", {src: "/images/
arrowhover.png"}] ];

[Simon Porritt]

setup your image overlay like this:

jsPlumb.Defaults.Endpoints = [ ["Blank"], ["Image", {src: "/images/

arrow.png", id:"image"}] ];

(note the 'image' parameter).

then inside your loops:

dest[i].endpoints[0].getOverlay("image").setImage( the other url )
or
src[i].endpoints[0].getOverlay("image").setImage( the other url )

the 'endpoints' array has two elements. index 0 is the source, index 1
is the target.

btw you might want to look at the new 'select' method in 1.3.7. it
helps you when you want to loop through a list of connections.

[Poki]

I've added the id into the image like to code below

jsPlumb.Defaults.Endpoints = [ ["Blank"], ["Image", { src:

endpointPath, id:"image" } ] ];


and I've used a new function in 1.3.7 " jsPlumb.select({...})" to get
connector parameter. It works well.
But I still can't change image on mouse over

$("div.window").mouseover(function() {
var vertexid = $(this).attr("id");

jsPlumb.select({source:
vertexid }).setPaintStyle({strokeStyle: hoverEdgeColor}); //It works
jsPlumb.select({target: vertexid }).setPaintStyle({strokeStyle:
hoverEdgeColor}); //It works

jsPlumb.select({source:
vertexid }).endpoints[1].getOverlay("image").setImage(hoverendpointPath); //
It does't work
jsPlumb.select({target:
vertexid }).endpoints[1].getOverlay("image").setImage(hoverendpointPath); //
It does't work

}).mouseout(function(){
var vertexid = $(this).attr("id");

jsPlumb.select({source: vertexid }).setPaintStyle({strokeStyle:
DefaultEdgeColor});
jsPlumb.select({target: vertexid }).setPaintStyle({strokeStyle:
DefaultEdgeColor});

jsPlumb.select({source:
vertexid }).endpoints[1].getOverlay("image").setImage(endpointPath);
jsPlumb.select({target:
vertexid }).endpoints[1].getOverlay("image").setImage(endpointPath);
});


Is this syntax correct?
jsPlumb.select({source:
vertexid }).endpoints[1].getOverlay("image").setImage(hoverendpointPath);

[Simon Porritt]

When you're chaining method calls on the result of a jsPlumb.select
you're not actually working with Connections directly; you're working
with a proxy object that exposes a bunch of methods that it will call
on each Connection. to do what you want - access a Connection
directly - you need to use the .each method:

jsPlumb.select({source:vertexid }).each(function(c) {
c.endpoints[1].getOverlay("image").setImage(hoverendpointPath);
});

--
Simon Porritt

+61 (0) 459 762 779

[Poki]

I've tried your code:

var targetEndpoint = {
endpoint: ["Image", { src: "images/downarrow.png", id: "img" }],
maxConnections: -1,
isTarget: true
};

....

jsPlumb.select({source:vertexid}).each(function(connection) {
connection.endpoints[1].getOverlay("img").setImage("images/
downarrowhover.png");
});


It doesn't work for me.

On Mar 10, 9:13 pm, Simon Porritt <simon.porr...@gmail.com> wrote:
> When you're chaining method calls on the result of a jsPlumb.select
> you're not actually working with Connections directly; you're working
> with a proxy object that exposes a bunch of methods that it will call
> on each Connection.   to do what you want - access a Connection
> directly - you need to use the .each method:
>
> jsPlumb.select({source:vertexid }).each(function(c) {
>      c.endpoints[1].getOverlay("image").setImage(hoverendpointPath);
>
>
>
>
>
>
>
>
>
> });

[Poki]

I've tried your code:

var targetEndpoint = {
endpoint: ["Image", { src: "images/downarrow.png", id: "img" }],
maxConnections: -1,
isTarget: true
};

....

jsPlumb.select({source:vertexid}).each(function(connection) {
connection.endpoints[1].getOverlay("img").setImage("images/
downarrowhover.png");
});


It doesn't work for me.

On Mar 10, 9:13 pm, Simon Porritt <simon.porr...@gmail.com> wrote:
> When you're chaining method calls on the result of a jsPlumb.select
> you're not actually working with Connections directly; you're working
> with a proxy object that exposes a bunch of methods that it will call
> on each Connection.   to do what you want - access a Connection
> directly - you need to use the .each method:
>
> jsPlumb.select({source:vertexid }).each(function(c) {
>      c.endpoints[1].getOverlay("image").setImage(hoverendpointPath);
>
>
>
>
>
>
>
>
>
> });

[Simon Porritt]

oh well. without being able to look over any code or having any insight into exactly how it doesn't work (are there console errors, for example?), i can't really help you any further unless you post me a link to a jsFiddle.

[Poki]

Hier is the code! but I can't upload jsPlumb 1.3.7 to jsFiddle
http://jsfiddle.net/8tYmF/74/

Please take a look!

On Mar 11, 9:46 pm, Simon Porritt <simon.porr...@gmail.com> wrote:
> oh well. without being able to look over any code or having any insight
> into exactly how it doesn't work (are there console errors, for example?),
> i can't really help you any further unless you post me a link to a jsFiddle.
>

[Simon Porritt]

ah...i'm sorry but i confused what you were asking with someone else's
question in an email at the time, and I told you the wrong thing!

Assigning an id to the endpoint was not correct - the whole getOverlay
thing was wrong. The actual code you needed was:

.each(function(connection) {
connection.endpoints[1].setImage("http://www.ggrightsize.com/images/misc/icon-triangle2.png");
});

..but after I realised that and tested it, i discovered there's
actually a bug in that method in jsPlumb! I've fixed it in 1.3.8,
which I am going to release soon.

This is the code you'll need, but of course I can't link it to a 1.3.8
version because it's not finalised yet:

http://jsfiddle.net/sporritt/Wmccf/11/

(note that you can save yourself some typing if you chain the .each
call to the previous setPaintStyle call). also you might want to look
at the importDefaults method in the documentation.

Simon

[Poki]

It still don't work in jsPlumb version 1.3.8 with the followingcode

.each(function(connection) {
connection.endpoints[1].setImage("http://www.ggrightsize.com/images/
misc/icon-triangle2.png");

});

[Simon Porritt]

here's that fiddle i posted with 1.3.8 final:

http://jsfiddle.net/Wmccf/25/

[Poki]

thank you so much!!!!

[Simon Porritt]

you're welcome ;)

hey and was it you who was asking about making the highlighted
connected appear on top of the others? i'm going to do that for
1.3.9.