Change color and width of Polyline

[RayJulich]

I would like it so that when a user mousesover a polyline on a map, it changes color and width. I have a map with 11 polylines on my map. Some on those polylines are connected so a user can't really see which line segment they are selecting. The polylines are all on a layer called reaches. I have the "listener" functions that correctly detect when a polyline in the reach layer has a mouse on it or when a mouse goes off of it:

dojo.connect(reaches, "onMouseOver", function(evt)
{
    
});
dojo.connect(reaches, "onMouseOut", function()
{
    
});

The problem is that with these functions is that they don't know which line is being selected. My other problem is - how do I change the color and width of the polyline? I know that I can define a new line and just display it over the top, but I think I should be able to just change the properties of the existing line.

[JacksonGilman1 · Accepted solution]

I believe the layer tacks a .graphic property to any mouse events.

require(['dojo/_base/connect'], function(dc) {          var highlightGraphic = function(evt) {         var graphic = evt.graphic,                         symbol = graphic.symbol;                      // make a copy of the symbol.         graphic._previousSymbol = symbol.toJson();                      // assuming the graphic has a SimpleLineSymbol...         symbol.setColor(color).setWidth(highlightWidth);         graphic.setSymbol(symbol);             }      var unHighlightGraphic = function(evt) {         var graphic = evt.graphic;                  if (graphic._previousSymbol) {             graphic.setSymbol(esri.symbol.fromJson(graphic._previousSymbol))             delete graphic._previousSymbol;         }     }          dc.connect(reaches, 'onMouseOver', highlightGraphic);     dc.connect(reaches, 'onMouseOut', unHighlightGraphic); }

[RayJulich]

Thank you very much for your response. I modified the code by a little bit.

require(['dojo/_base/connect'], function(dc) {
    
    var highlightGraphic = function(evt) {
        var graphic = evt.graphic,            
            symbol = graphic.symbol;
            
        // assuming the graphic has a SimpleLineSymbol...
        symbol.setColor(highlighcolor).setWidth(highlightWidth);
        graphic.setSymbol(symbol);        
    }

    var unHighlightGraphic = function(evt) {
        var graphic = evt.graphic;
        symbol = graphic.symbol;
        
        symbol.setColor(unhighlightColor).setWidth(unhighlightWidth);
              graphic.setSymbol(symbol);
    }
    
    dc.connect(reaches, 'onMouseOver', highlightGraphic);
    dc.connect(reaches, 'onMouseOut', unHighlightGraphic);
});

When trying to use the Previous Symbol, the first polyline that I moused over worked fine, but the subsequent polylines did not. When I moused over one, it would show the hightlighted color and width fine, but when I mouse off the polyline, it would disappear. So I just change the color and width of the line when I moused off.