We help IT Professionals succeed at work.

SVG mouseover event not changing circle Fill color

sqdperu
sqdperu asked
on
63 Views
Last Modified: 2020-05-22
VS 2017 / ASP.NET / VB.NET code behind / SVG

The current working code has SVG circles that change color to show progress based on the color hex values set in the code behind.  Also, some circles will show an AJAX ModalPopupExtender containing data when clicked on.  All that is working fine.

The goal of what I am trying to add is if a Boolean is set to true in the code behind (indicating data to view exists), I want the circle to change to a lighter color on "mouseover" and return to it's normal color on "mouseout".

UPDATE: See my next post on problem description.  The events are firing -  the colors just won't change.

I have not gotten to figuring out how to implement to "IF" conditional for the hovering effect or not.

I cannot even get it simply change circle color on the "mouseover" to a hard coded value. Nothing happens as if the mouseover event is not firing.

For simplicity, I am only showing the code pertaining to the circles functioning.
Note - the arrayState code sets the circle base on variables from the code behind.
"circle4" is the one I am trying to get the hover effect on.

<head runat="server">
    
    <style type="text/css">

      /* Array code is what changes the colors of the circles and lines (from Code Behind hex values)*/ 
      <%
           Dim arrState(8) As String
           arrState(1) = strOrderAck
           arrState(2) = strDrawSub
           arrState(3) = strDrawApp
           arrState(4) = strEngnrd
           arrState(5) = strMfgStart
           arrState(6) = strMfgComp
           arrState(7) = strShipRdy
           arrState(8) = strShipped
           Dim stepNum As Integer
           For stepNum = 1 To UBound(arrState)

              Response.Write("#circle" & stepNum & " { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
              Response.Write("#line"   & stepNum & " { stroke: " & arrState(stepNum) & "; stroke-width:8;}" & vbCrLf)
          
           Next
      %>
     /* End of Array code */


    </style>

    <%-- Needed so we can call the same ModalPopupExtender from 2 different events --%>
    <script type="text/javascript">

        function ShowModalPopup() {
            $find("mpe").show();
            return false;

    </script>

</head>

<body>

        <div style="margin: 5px; padding-left: 50px">

            <div style="position: relative; height:0; width: 100%; margin:0;  padding: 0; padding-bottom: 12%; overflow: hidden" >  

                 <svg viewBox="0, 0, 1200, 140" preserveAspectRatio="xMinYMin meet"  style="position: absolute" >

                     
                     <style type="text/css">
     
                            .datacircle {
                                cursor: pointer;
                            }

                            .label {
                                pointer-events: none;
                            }

                     </style>




                    <circle id = "circle1" runat="server" cx = "50" cy = "50" r = "36" >
                         <title style="color: #42B4E6">The order is in queue</title>
                    </circle>
                   
                    <text x="30" y="105" fill="black" font-size = "16" font-family = "sans-serif">Order</text>

                    <text x="1" y="125" fill="black" font-size = "16" font-family = "sans-serif">Acknowledged</text>

                    <line id = "line1" x1 = "86" y1 = "50" x2 = "140" y2 = "50" />


                    <circle id = "circle2" runat="server" cx = "176" cy = "50" r = "36" > 
                       <%If strDrwReqd = "0" Then%>    
                            <title>No drawings required for this order</title>
                       <%End If%> 
                    </circle>
      
                    <text x="147" y="105" fill="black" font-size = "16" font-family = "sans-serif">Drawing</text>
 
                    <text x="141" y="125" fill="black" font-size = "16" font-family = "sans-serif">Submitted</text>     

                    <line id = "line2" x1 = "212" y1 = "50" x2 = "267" y2 = "50" />

                    <%If strDrwReqd = "0" Then%>    
                        <line id = "line2Xa" x1 = "157" y1 = "31" x2 = "195" y2 = "69" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
                        <line id = "line2Xb" x1 = "157" y1 = "69" x2 = "195" y2 = "31" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
                    <%End If%> 


                    <circle id = "circle3" runat="server" cx = "303" cy = "50" r = "36" >   
                       <%If strDrwReqd = "0" Then%>    
                            <title>No drawings required for this order</title>
                       <%End If%> 
                    </circle>                        
     
                    <text x="274" y="105" fill="black" font-size = "16" font-family = "sans-serif">Drawing</text>
 
                    <text x="271" y="125" fill="black" font-size = "16" font-family = "sans-serif">Approved</text>         
      
                    <line id = "line3" x1 = "339" y1 = "50" x2 = "394" y2 = "50" /> 

                    <%If strDrwReqd = "0" Then%>    
                        <line id = "line3Xa" x1 = "284" y1 = "31" x2 = "322" y2 = "69" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
                        <line id = "line3Xb" x1 = "284" y1 = "69" x2 = "322" y2 = "31" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
                    <%End If%> 

      

                    <%-- IF Code Behind boolean is True, show circle in lighten color on mouseover.  Return to normal color on mounse out. --%>
                    <%-- No mouse effect if Code Behind boolean is False. --%>

                    <circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" />     
     
                    <text class="label" x="389" y="105" fill="black" font-size = "16" font-family = "sans-serif">Engineered</text>    
      
                    <line id = "line4" x1 = "466" y1 = "50" x2 = "521" y2 = "50" />       
      
      


                    <%-- onclick needed on this circle because it calls the same ModalPopupExtender as another circle --%>
                    <circle id = "circle5" runat="server" cx = "557" cy = "50" r = "36" onclick="return ShowModalPopup()" />     
     
                    <text x="505" y="105" fill="black" font-size = "16" font-family = "sans-serif">Manufacturing</text>
 
                    <text x="532" y="125" fill="black" font-size = "16" font-family = "sans-serif">Started</text>         
      
                    <line id = "line5" x1 = "593" y1 = "50" x2 = "648" y2 = "50" />       
      
 
                    <%-- onclick needed on this circle because it calls the same ModalPopupExtender as another circle --%>
                    <circle id = "circle6" runat="server" cx = "684" cy = "50" r = "36" onclick="return ShowModalPopup()" />     
     
                    <text x="632" y="105" fill="black" font-size = "16" font-family = "sans-serif">Manufacturing</text>
 
                    <text x="646" y="125" fill="black" font-size = "16" font-family = "sans-serif">Completed</text>         
      
                    <line id = "line6" x1 = "720" y1 = "50" x2 = "775" y2 = "50" />     
      
      
                    <circle id = "circle7" runat="server" cx = "811" cy = "50" r = "36" />     
     
                    <text x="762" y="105" fill="black" font-size = "16" font-family = "sans-serif">Ready to Ship</text>     
      
                    <line id = "line7" x1 = "847" y1 = "50" x2 = "902" y2 = "50" />           
      
      
                    <circle id = "circle8" runat="server" cx = "938" cy = "50" r = "36" />     
     
                    <text x="910" y="105" fill="black" font-size = "16" font-family = "sans-serif">Shipped</text>           
      


                          <script type="text/javascript" > 

                                var dcircles = document.getElementById("circle4");
                        
                                  dcircles.addEventListener("mouseover", mouseOverEff);
                                  dcircles.addEventListener("mouseout", mouseOutEff);
                        
                        
                                function mouseOverEff() {                         

                                    dcircles.style.color = "blue";
                                 }


                                function mouseOutEff() {                 
   
                                    dcircles.style.color = strEngnrd;     <%--  generates Error: 'strEngnrd' is undefined  --%>
                                 }

                           </script>


                 </svg>

            </div>

</body>

Open in new window


What am I doing wrong?

Thanks,

SVG circles
Comment
Watch Question

leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
test page :  https://jsfiddle.net/p5s0ynLk/ 

<script type="text/javascript">


    var dcircles = document.getElementById("circle4");
    dcircles.addEventListener("mouseover", mouseOverEff);
    dcircles.addEventListener("mouseout", mouseOutEff);


    function mouseOverEff() {
        this.setAttribute("fill", "blue");
    }


    function mouseOutEff() {
        this.setAttribute("fill", "green");
    }


</script>
    <!-- set value to 0 for no mouse effect -->
    <asp:hiddenfield id="HiddenField1" value="1" runat="server"/>

    <svg height="100" width="100">
        <circle class="datacircle" id = "circle4"  cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />  
    </svg>
    <script>
        var b = document.getElementById("<%= HiddenField1.ClientID %>").value;
        if (b==1) {
            var circle4 = document.getElementById("circle4");
            circle4.addEventListener("mouseover", function () {
                this.setAttribute("fill", "yellow");
            });
            circle4.addEventListener("mouseout", function () {
                this.setAttribute("fill", "green");
            });
        }
    </script>
sqdperuApplication Development Engineer

Author

Commented:
leakim971, thanks for the response.

While I was waiting on a response I tried a few things.  

I changed the "circle4" line like this:  (added events)
<circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" onmouseover="mouseOverEff()" onmouseout="mouseOutEff()"/>     

And I changed the JavaScript like this:
<script type="text/javascript" > 
   var dcircles = document.getElementById("circle4");
   var flag = "<%= blnEngRecs %>";
   //alert( flag );

   function mouseOverEff() {   
                      
     if (flag == "True") { 
        //alert( "hit!" );

        dcircles.setAttribute("fill", "blue");

        //dcircles.style.color = "blue"
        //arrState(4) = "blue"
        //Response.Write("#circle4 { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
        //Response.Write("#circle4 { fill: ""blue"";}" & vbCrLf)
        //Response.Write("circle4 { fill: 'blue';}" & vbCrLf)
                            }
    } 

    function mouseOutEff() {  
       //alert( "out!" );
       //dcircles.setAttribute("fill", "red");
       //dcircles.style.color = "<%= strEngnrd %>";

       dcircles.setAttribute("fill", "<%= strEngnrd %>");

     }
</script>
I added the "alerts" and they displayed.  So this shows my events are indeed firing (I didn't think they were before).   The problem is the color is just not changing on the circle4.  

So as a test, I removed the code that is needed to set my colors:
      /* Array code is what changes the colors of the circles and lines */ 
      <%
           Dim arrState(8) As String
           arrState(1) = strOrderAck
           arrState(2) = strDrawSub
           arrState(3) = strDrawApp
           arrState(4) = strEngnrd
           arrState(5) = strMfgStart
           arrState(6) = strMfgComp
           arrState(7) = strShipRdy
           arrState(8) = strShipped
           Dim stepNum As Integer
           For stepNum = 1 To UBound(arrState)
              Response.Write("#circle" & stepNum & " { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
              Response.Write("#line"   & stepNum & " { stroke: " & arrState(stepNum) & "; stroke-width:8;}" & vbCrLf)
          
           Next
      %>
     /* End of Array code */
Then on circle4 the color blue would show onmouseover and the original color onmouse out (the uncomment code in functions) .   So my initial color code is preventing the temporary code for mouseover / mouseout from showing.  You can see the commented out code that I tried to no avail.  

I need the code that sets the initial color and it works perfect.   Any idea what temporary mouseover / mouseout code I need that will allow it to change the circle color just for mouse over?

Thanks,
Systems architect
CERTIFIED EXPERT
Top Expert 2006
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
sqdperuApplication Development Engineer

Author

Commented:
Hey Zvonko,

Thanks for that reply.  I believe what you are suggestion would make it change the color every time there is a hover.  I want it to be conditional.  I only want the hover effect if my Boolean is True (meaning I have data to show).  Otherwise, show no hover effect.

Here is what I am trying.  The event fires correctly, but the hover effect never shows.
This is my latest attempt.   It gets the run time error "Error: 'Response' is undefined":
<div style="margin: 5px; padding-left: 50px">
     <div style="position: relative; height:0; width: 100%; margin:0;  padding: 0; padding-bottom: 12%; overflow: hidden" >  
        <svg viewBox="0, 0, 1200, 140" preserveAspectRatio="xMinYMin meet"  style="position: absolute" >
                    
                     <style type="text/css">
                              .datacircle {
                                cursor: pointer;
                              }
        
                              .label {
                                pointer-events: none;
                              }
                     </style>
...

    <circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" onmouseover="mouseOverEff()" onmouseout="mouseOutEff()"/>    

...

     <script type="text/javascript" >  

        var dcircles = document.getElementById("circle4");
        var flag = "<%= blnEngRecs %>";

        function mouseOverEff() {
           if (flag == "True") {
              Response.Write("#circle4 { fill: blue;}" & vbCrLf)
                               }
                                }

       function mouseOutEff() {                 
            dcircles.setAttribute("fill", "<%= strEngnrd %>");
                              }
     </script>


      </svg>
   </div>
</div>

I have also tried (with no luck) the following:
dcircles.setAttribute("fill", "blue");
dcircles.style.color = "blue"
arrState(4) = "blue"
Response.Write("#circle4 { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
Response.Write("#circle4 { fill: ""blue"";}" & vbCrLf)
Response.Write("circle4 { fill: 'blue';}" & vbCrLf)

Any idea what is the correct syntax to put in my "function mouseOverEff()" to cause the color change on hover (when the conditional is met)?

Thanks,








leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Any idea what is the correct syntax to put in my "function mouseOverEff()" to cause the color change on hover (when the conditional is met)?

check my first answer, second code snippet, lines 1, 2, 8, 9, 17
sqdperuApplication Development Engineer

Author

Commented:
leakim971, thanks for the response, but I no longer have an issue with the event firing.  It is firing just fine - I tested it with "Alerts" and it does it conditionally.   The issue is the color is not changing on mouseover.

If you copy the code below into https://codepen.io/pen/?editors=1100
you can see that the events fire and the colors change.  However, in codepen the "style / arrState" code does not execute.  In my actual VS ASP.NET web form app the  "style / arrState" code functions just fine and colors the circles correctly.  However, the "dcircles.setAttribute("fill", "blue");" code (as well as the " dcircles.setAttribute("fill", "green");" code) in the script Functions() are completely disregarded and the colors of the circle4 never changes on hover.

So the question remains.  What is it in VS that is preventing the color code change from taking effect?

<html>
 
<head runat="server">
</head>
<body>

<div style="margin: 5px; padding-left: 50px">
     <div style="position: relative; height:0; width: 100%; margin:0;  padding: 0; padding-bottom: 12%; overflow: hidden" >  
        <svg viewBox="0, 0, 1200, 140" preserveAspectRatio="xMinYMin meet"  style="position: absolute" >
                    
         <style type="text/css">
          <%
           Dim arrState(8) As String
           arrState(1) = "Grey"
           arrState(2) = "Grey"
           arrState(3) = "Grey"
           arrState(4) = "Red"
           arrState(5) = "Grey"
           arrState(6) = "Grey"
           arrState(7) = "Grey"
           arrState(8) = "Grey"
           Dim stepNum As Integer
           For stepNum = 1 To UBound(arrState)
              Response.Write("#circle" & stepNum & " { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
              Response.Write("#line"   & stepNum & " { stroke: " & arrState(stepNum) & "; stroke-width:8;}" & vbCrLf)
          
           Next
          %>
        </style>
       <circle id = "circle1" runat="server" cx = "50" cy = "50" r = "36" />      
       <circle id = "circle2" runat="server" cx = "176" cy = "50" r = "36" />    
       <circle id = "circle3" runat="server" cx = "303" cy = "50" r = "36" />    
          
          
    <circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" onmouseover="mouseOverEff()" onmouseout="mouseOutEff()"/>    
          
          
      <circle id = "circle5" runat="server" cx = "557" cy = "50" r = "36"   />     
      <circle id = "circle6" runat="server" cx = "684" cy = "50" r = "36"   /> 
      <circle id = "circle7" runat="server" cx = "811" cy = "50" r = "36" />      
      <circle id = "circle8" runat="server" cx = "938" cy = "50" r = "36" />       

     <script type="text/javascript" >  
        var dcircles = document.getElementById("circle4");
        var flag = "True";
        function mouseOverEff() {
           if (flag == "True") {
             
               //alert( "hit!" );
             dcircles.setAttribute("fill", "blue");
             
             //Response.Write("circle4 { fill: 'blue';}");
                         
                          
                               }
                                }
       function mouseOutEff() {                 
            dcircles.setAttribute("fill", "green");
                              }
     </script>

      </svg>
   </div>
</div>
  
</body>
</html>

Thanks,
leakim971Multitechnician
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
the lines I'm talking about are not about the firing but about your question :

Any idea what is the correct syntax to put in my "function mouseOverEff()" to cause the color change on hover (when the conditional is met)?
ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
You mix too much things cross together.

My proposal has nothing to do with JavaScript events.

So my solution does say, if you want to have the fill color change on hover on circle4 then inject my code, otherwise do not inject that code for circle4.

Your complications come from mixing the server side code injection with JavaScript event handling. That cannot work.



ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
And if you still want to do it by JavaScript and not with sytle injection then you can do it like this:

<html>
<head runat="server">
</head>
<body>
<div style="margin: 5px; padding-left: 50px">
     <div style="position: relative; height:0; width: 100%; margin:0;  padding: 0; padding-bottom: 12%; overflow: hidden" >  
        <svg viewBox="0, 0, 1200, 140" preserveAspectRatio="xMinYMin meet"  style="position: absolute" >                    
         <style type="text/css">
          <%
           Dim arrState(8) As String
           arrState(1) = "Grey"
           arrState(2) = "Grey"
           arrState(3) = "Grey"
           arrState(4) = "Red"
           arrState(5) = "Grey"
           arrState(6) = "Grey"
           arrState(7) = "Grey"
           arrState(8) = "Grey"
           Dim stepNum As Integer
           For stepNum = 1 To UBound(arrState)
              Response.Write("#circle" & stepNum & " { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
              Response.Write("#line"   & stepNum & " { stroke: " & arrState(stepNum) & "; stroke-width:8;}" & vbCrLf)
          
           Next
          %>
        </style>
       <circle id = "circle1" runat="server" cx = "50" cy = "50" r = "36" />      
       <circle id = "circle2" runat="server" cx = "176" cy = "50" r = "36" />    
       <circle id = "circle3" runat="server" cx = "303" cy = "50" r = "36" /> 
    <circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" onmouseover="mouseOverEff()" onmouseout="mouseOutEff()"/> 
      <circle id = "circle5" runat="server" cx = "557" cy = "50" r = "36"   />     
      <circle id = "circle6" runat="server" cx = "684" cy = "50" r = "36"   /> 
      <circle id = "circle7" runat="server" cx = "811" cy = "50" r = "36" />      
      <circle id = "circle8" runat="server" cx = "938" cy = "50" r = "36" />
     <script type="text/javascript" >  
        var dcircles = document.getElementById("circle4");
        var flag = true;
        function mouseOverEff() {
           if (flag == true) {  
             dcircles.style.fill = "blue";             
             console.log("circle4.style.fill = 'blue';");
           }
        }
      
       function mouseOutEff() {
        if (flag == true) { 
            dcircles.style.fill = "green";
        }
       }
     </script>
      </svg>
   </div>
</div>  
</body>
</html>
sqdperuApplication Development Engineer

Author

Commented:
Zvonko,
Sorry I was not familiar with server side code injection and what you were trying to tell me, but I understand now.
Thank you for explaining what I was doing wrong and giving the details on how to do the solution 2 ways.

I am going to use the server side code injection method in the Style section.

In case others want to see both solutions that work for me, I am including them below.
NOTE:  I have removed the hard-coded colors and am using variables from my Code Behind.

Server side code injection in Style section.  (Solution that I am using):
<html>
<head runat="server">
</head>
<body>
<div style="margin: 5px; padding-left: 50px">
     <div style="position: relative; height:0; width: 100%; margin:0;  padding: 0; padding-bottom: 12%; overflow: hidden" >  
        <svg viewBox="0, 0, 1200, 140" preserveAspectRatio="xMinYMin meet"  style="position: absolute" >      
            <style type="text/css">
             <%
              Dim arrState(8) As String
              arrState(1) = strOrderAck
              arrState(2) = strDrawSub
              arrState(3) = strDrawApp
              arrState(4) = strEngnrd
              arrState(5) = strMfgStart
              arrState(6) = strMfgComp
              arrState(7) = strShipRdy
              arrState(8) = strShipped
              Dim stepNum As Integer
              For stepNum = 1 To UBound(arrState)
              Response.Write("#circle" & stepNum & " { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
              Response.Write("#line"   & stepNum & " { stroke: " & arrState(stepNum) & "; stroke-width:8;}" & vbCrLf)
          
              Next
             %>
             <%If blnEngRecs = "True" Then%>
                   svg #circle4:hover {
                       fill: <%= greenOnHover %>;
                   }  
             <%End If%>
           </style> 
       <circle id = "circle1" runat="server" cx = "50" cy = "50" r = "36" />      
       <circle id = "circle2" runat="server" cx = "176" cy = "50" r = "36" />    
       <circle id = "circle3" runat="server" cx = "303" cy = "50" r = "36" />  
       <circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" />
       <circle id = "circle5" runat="server" cx = "557" cy = "50" r = "36"   />     
       <circle id = "circle6" runat="server" cx = "684" cy = "50" r = "36"   /> 
       <circle id = "circle7" runat="server" cx = "811" cy = "50" r = "36" />      
       <circle id = "circle8" runat="server" cx = "938" cy = "50" r = "36" />
      </svg>
   </div>
</div>  
</body>
</html>

JavaScript version that would also work instead:
<html>
<head runat="server">
</head>
<body>
<div style="margin: 5px; padding-left: 50px">
     <div style="position: relative; height:0; width: 100%; margin:0;  padding: 0; padding-bottom: 12%; overflow: hidden" >  
        <svg viewBox="0, 0, 1200, 140" preserveAspectRatio="xMinYMin meet"  style="position: absolute" >      
            <style type="text/css">
             <%
              Dim arrState(8) As String
              arrState(1) = strOrderAck
              arrState(2) = strDrawSub
              arrState(3) = strDrawApp
              arrState(4) = strEngnrd
              arrState(5) = strMfgStart
              arrState(6) = strMfgComp
              arrState(7) = strShipRdy
              arrState(8) = strShipped
              Dim stepNum As Integer
              For stepNum = 1 To UBound(arrState)
              Response.Write("#circle" & stepNum & " { fill:   " & arrState(stepNum) & ";}" & vbCrLf)
              Response.Write("#line"   & stepNum & " { stroke: " & arrState(stepNum) & "; stroke-width:8;}" & vbCrLf)
          
              Next
             %>
           </style> 
       <circle id = "circle1" runat="server" cx = "50" cy = "50" r = "36" />      
       <circle id = "circle2" runat="server" cx = "176" cy = "50" r = "36" />    
       <circle id = "circle3" runat="server" cx = "303" cy = "50" r = "36" />  
       <circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" onmouseover="mouseOverEff()" onmouseout="mouseOutEff()"/>
       <circle id = "circle5" runat="server" cx = "557" cy = "50" r = "36"   />     
       <circle id = "circle6" runat="server" cx = "684" cy = "50" r = "36"   /> 
       <circle id = "circle7" runat="server" cx = "811" cy = "50" r = "36" />      
       <circle id = "circle8" runat="server" cx = "938" cy = "50" r = "36" />
       <script type="text/javascript" > 
          var dcircles = document.getElementById("circle4");
          var flag = "<%= blnEngRecs %>";
          var hoverColor = "<%= greenOnHover %>"
          var originalColor = "<%= strEngnrd %>"
                        
          function mouseOverEff() {                         
             if (flag == "True") { 
                dcircles.style.fill = hoverColor;             
                console.log("circle4.style.fill = hoverColor;");
             }
           }
           function mouseOutEff() {                 
              dcircles.style.fill = originalColor;             
              console.log("circle4.style.fill = originalColor;");
           }
       </script>
      </svg>
   </div>
</div>  
</body>
</html>
Thanks for all your help

ZvonkoSystems architect
CERTIFIED EXPERT
Top Expert 2006

Commented:
Thank you for posting the proven working solution. That is the essence of Experts Exchange : )


Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.