troubleshooting Question

# SVG mouseover event not changing circle Fill color asked on
JavaScriptASP.NET* SVG
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>

<body>

<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");

function mouseOverEff() {

dcircles.style.color = "blue";
}

function mouseOutEff() {

dcircles.style.color = strEngnrd;     <%--  generates Error: 'strEngnrd' is undefined  --%>
}

</script>

</svg>

</div>

</body>
``````

What am I doing wrong?

Thanks,

Zvonko
Systems architect
###### Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
{"ft_lang_label":"__label__en","ft_lang_prob":0.55066776,"math_prob":0.87560046,"size":5725,"snap":"2021-31-2021-39","text_gpt3_token_len":1927,"char_repetition_ratio":0.14717707,"word_repetition_ratio":0.24824356,"special_character_ratio":0.4075109,"punctuation_ratio":0.088607594,"nsfw_num_words":0,"has_unicode_error":false,"math_prob_llama3":0.9869768,"pos_list":[0,1,2],"im_url_duplicate_count":[null,null,null],"WARC_HEADER":"{\"WARC-Type\":\"response\",\"WARC-Date\":\"2021-09-21T21:24:19Z\",\"WARC-Record-ID\":\"<urn:uuid:0914b31b-5771-4257-b506-82bd9d186f29>\",\"Content-Length\":\"171922\",\"Content-Type\":\"application/http; msgtype=response\",\"WARC-Warcinfo-ID\":\"<urn:uuid:97792080-bfd7-40e7-84b5-824a0553818d>\",\"WARC-Concurrent-To\":\"<urn:uuid:1da6b781-6cf8-48cd-9b09-0d6160659906>\",\"WARC-IP-Address\":\"104.22.4.165\",\"WARC-Target-URI\":\"https://www.experts-exchange.com/questions/29182571/SVG-mouseover-event-not-changing-circle-Fill-color.html\",\"WARC-Payload-Digest\":\"sha1:RY466VDVTO44Q5ZUQAJCD5GVTROUMUUE\",\"WARC-Block-Digest\":\"sha1:QD5BHMP7ICKZFUVAROPFBLKVBQETCBAV\",\"WARC-Identified-Payload-Type\":\"text/html\",\"warc_filename\":\"/cc_download/warc_2021/CC-MAIN-2021-39/CC-MAIN-2021-39_segments_1631780057227.73_warc_CC-MAIN-20210921191451-20210921221451-00597.warc.gz\"}"}