Pass base64 image to javascript function when hover image

StackOverflow https://stackoverflow.com/questions/22906273

  •  28-06-2023
  •  | 
  •  

Question

net. Here is my question. I gt one image inside my repeater.Please see the code below

                        <asp:Repeater ID="rptCompanyProfile" runat="server" OnItemDataBound="rptCompanImage_ItemDataBound" DataMember="PICTURE_CONTENT">
                        <ItemTemplate>

                            <td width="200px">
                                <asp:HiddenField ID="hfPictureContent" runat="server" Value='<%#Eval("PICTURE_CONTENT") %>' />
                        <asp:ImageButton ID="ImageButton1" runat="server"
                           ImageUrl='<%# string.Format("data:image/jpg;base64,{0}",Eval("PICTURE_CONTENT"))%>' 

                            PostBackUrl='<%# string.Format("~/Module/Client/WhoWeAreDetail.aspx?filterValue={0}&&filterType={1}",Eval("COMPANY_PROFILE_DETAIL"),Eval("COMPANY_PROFILE_ID") )%>' 
                            />


                            </td>
                            <td width="10px">&nbsp;</td>
                        </ItemTemplate>

                    </asp:Repeater>

I need to change image when user move out the image.My image is store in database which is format base64 string. So i write the code as below

protected void rptCompanImage_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {

            ImageButton imageButton = (ImageButton)e.Item.FindControl("ImageButton1");
            HiddenField hfPictureContent = (HiddenField)e.Item.FindControl("hfPictureContent");

            System.Data.DataRowView rowView = e.Item.DataItem as System.Data.DataRowView;


            dlcComProfileDetail profileDetail = (dlcComProfileDetail)e.Item.DataItem;
            hfPictureContent .Value= profileDetail.PICTURE_CONTENT_HOVER;

            imageButton.Attributes.Add("onmouseout", @"onMouseOut(this,"  + hfPictureContent.Value  + ")");

          //  imageButton.Attributes.Add("onmouseout", @"this.src='data:image/jpg;base64,"+profileDetail.PICTURE_CONTENT_HOVER+"'");




        }
    }

My javascript function

**        function onMouseOut(item, value) {

        item.src = "data:image/png;base64," + value;
        item.setAttribute('src', src3);


    }




</script>**

But i keep get the error Uncaught SyntaxError: Unexpected token ) i am not able to pass my base64 string image to my javascript function.

Please help . Thanks

Was it helpful?

Solution

I would try to add explicit quotes when you recall the onMouseOut function, that is:

imageButton.Attributes.Add("onmouseout", @"onMouseOut(this,'" + hfPictureContent.Value  + "')");

>>> UPDATED ANSWER <<<

The problem is due to line breaks in Base64 when you pass it to onMouseOut function. Using the HTML you provided (here below) I was able to reproduce the issue:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>

        <script type="text/javascript">
            function onMouseOut(item, value) {

                item.src = "data:image/png;base64," + value;
            }
        </script>
    </head>
    <body>

        <input
            type="image"
            name="ctl00$ContentPlaceHolder1$rptCompanyProfile$ctl00$rptCompanyProfile$ctl00$ImageButton1"
            id="Image1"
            onmouseout="onMouseOut(this,'/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUAAA/+4ADkFkb2JlAGTAAAAAAf/b
                AIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQUFBQUGBgcHCAcHBgkJCgoJCQwMDAwM
                DAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4ODg8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwM
                DAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAUABCAwERAAIRAQMRAf/EAKMAAAIDAQEBAAAAAAAAAAAA
                AAcIBAYJBQMKAQACAwEBAAAAAAAAAAAAAAAEBQIDBgEAEAABAwIEAwUEBQkHBQAAAAABAgMEEQUA
                IRIGMRMHQVFhFAiBIjIVcVIjM1SRodFCYoI0FgmxwVMkNTYXklY3GBkRAAIBAgQDBQcFAQAAAAAA
                AAECABEDITESBEFRBWFxoSIT8IGRscHRFOEyUrIjFf/aAAwDAQACEQMRAD8AO8VuOyl5v55JjIcU
                vmxG3lpRXUeKQaYyTXQrEV4mHhKgHslcatmzFSHFSZBdcKzq1GuFb7tAxh6WWIETX1K9V3xcJvTb
                YsZFuscUIbvd7aUC9NdWn344KTVLaCQCBmo8cssOdjZDAXD7vvKLrFfKIpcG0usRg8thciU6oJba
                05VrSurs4YakwYCsIFk2vGnPtx5k7yqHNK5mlSatoOagTlTgch25YrZ6Qi3bBkyaz09ajzEMQ3rh
                PjPraamuOBLSoyfhVoczqSceBMkQspC5shp1xcKlpQwko50YJUh9PHS42f7yK9mPFQc5TqplC90k
                6yyLdvCzWyS3GbgrcS1IDjYbSW1j3yU0NM6Up9OFfUNqfTLLmIbtbgc6TH6/muD+Fi/FzOCfu/rf
                R44y/wCVdhv46y5Hbjz5kS2HNQL7gUKcPfVjVXtqCxavEzPreoAOyDqZYp8Bu63RwlTEFLshaUiq
                iGxUgfTTChtkGuU7YwTdELFAn9I98bwm3LdLG3H/ACK3FvpaSnQ4t1aislA7U55n+3DpN0q4CXp0
                12UMT9537b0A3PuuKWYMB63Ot0U60pKk5kZkmlKK8D7MWLudWWMmenFTQ4CT3/TPvywWWZdGnEok
                B/yzUZokK5SvddcUoklNBkK5k48b5Aqwwln4AOAbGDK5en/eLCk3BccNRF0XIYbUStBJqCa94yPd
                jq7oGVPsGXLGDe6bUfiO3GOW5Lr0RorSy24mqUk0JKBRfE0qB+TBIaoi11oYFJUoQ5qFMKec5B5j
                MkjQsaT8SchWhxMrqEipoaxp/wDnJ/8AFW//AGTX4h/G/W48f2OOM/8A84cj+/wjT8gc+2bc2yzK
                uO27e5EtikEqWVuUpr94540Fy0zLgOMzysMIG9/IgWLZe9J94eFuh2yDIdnSCkkoQkZgAAkk8ABx
                wjKlbtOMZW8QJX+iu8dgdRbFEk7QvsS5Oso/zFuWUplMqGR5jQIcQa9+WCLW2KYEYzQpuVuCqmMF
                AQIoWlqOgdi3G1lK6jvNAT7Tgq2NPCdZdWZnpMh+bOl+K44xXUUrKFAnKhJBrjtzHMSsLScSXbba
                gKjLaQQoa3EhIGfccsD1UGk81SKzPjqrtCK3InMxHYs2JLW6lTDhCHo+oLWtbZPw/Aag5Gnfgq2p
                pgYj3LDUcKRB+osTb8Uu/Lo8iG0lpKzGdIV9oKklLgJqFDv4+PHFq1qIPB98gV+GR/tv578Q/hv8
                Xh+bFfq/3pLtP9az6l9nblU1tmLGMQq8opTYUBxoojDFb9FyyMVBYFerMJMrbe8lCO1KclR9UWK7
                QIU/rTykqJBpVYHZjNX7mu4zEUxjnarpKiI5sfbVzbtrnU+Xs1Ni3bYru9b5jLb7S35TbagRIZW0
                GnQ2oHLUkpOYrlgprTJa1h6jlxjS1eVr1Db09vAxntz3XcUXbyLhAusyxSbrETIbltx0vrQlxPuK
                KHPdBqe3HS5UauyMnII4chFr231l9SzjssWre+y+olvtkjlSYi4vkpqAgn3Hlt6kIKk5VNE1zrTF
                h3IZeI7aRd6dwNSoPZkfrGp2xvJe6rcqfLtcmyXdhSGrnZ5SSlxl6mopT2LSewg0wvZsTzhunLkY
                qnXCxptkmXdVRl+Vk3Bl1qQVKAZSUAKSrScxUkkDB+2cFYi6haIeJFvvo/1DvG3Lrunb+z7rJs0f
                mOtzFUZbdaQlRc5CHilx3Sn3yG0mgxcdzbRgGNK5ShNleZC4XAZzQX/1ntv/AGq1/wCBP5c+/V/r
                X+Dx4/tYW6zzOeqdr9ppt0+tsZ7bLSympU6vP97GoVaL74lBgX6vN/LrVKcSgFkXm3tyEq4FtboB
                B9tMZvfDTcJ7RH/ShqdR2GDaRbm3XrZbLcE8qS8h2a2VFXLjIIK8jXTq4CvfjxBwA4zRpYQZwpSB
                bLw7MtqFJZQlhuKEKKa0pxQFdnZTtwQHDEqJC5t/IK98Dm2OiG3trfzpGTY3pL+9Vsruk+IkV1Rw
                UNOR9J+wVpNFFAST2kjFltri2mtHEGAbjboby3gPMO0y3Ks8Pb8BuIhbq1xUBJ5qhzaJTRIUQSCa
                cSDhTebQNJ4Q6ypZqwXSoLO8dwW+2KhszHLcHZKW3TqZSUitSDlUkAVI4VwNYvXHOhZfudvbH+jD
                uhCt1ukXFCmdzW4fO/OsxmpaXlOtGM62VNtNNqADSUtqPMSOJHdhneTSlGxOGPfw7KSm64t2iVOF
                Dh7Z9kMNT3fr6vZ3YrmX0ws9NGx/KjI/WDzlf+rGqGAidYIetcFb+3LyhoDmquNuLZIrn5lvsxn9
                +pLmnMR70ttLqe/5RI9l7m33Ytw3+42puPeOY4pubAuGvSC2dQLakpUU5DTQihxDbK4fDGaa/fR0
                DZQswLhvK+uC9Xr5M3FlPofcbt0d9ElopJC2g44sJVUZZpRp8cX3dtUhq8ccPCS2+68uk5Uwx8YT
                7Bvpxy1Tbc+gC5WpRaknipSDm25XL4k8fGuIPeNtCvL5SPpLcatcIP8AdF0cdZU9HKlOvAk9g1U0
                5+GeEO4eorLrQINJxumMGFcL9eoku4qimNEDsxxtxLbziFLGpKSeAPBRGdDjvTk1McchLd4GCrQV
                xjDWi1/HJUyUR23nVW4qrqc15F9Wqp95PuivZ4Uw2oT8fYzOdQ3IbyKe/wC3una5A/PiNIsh16a2
                6GzsqNKlaGGtTrj77xCEJAUakqUQABjXUAGMRoTj3xPPUZ6h+gm2fP7UY6mWS67yuUqD8l27aXhc
                XDKbkNrCH1RtbbIISQS4oYS79PMWUcj8I46dcAZQTmafGLE7aYczcyN22zcE/Zz11SpcS4sF16C8
                EkpLMlhKgCCmhChQ+OWA7D1ck5GauytsW9D17xn41HhL+uP1CfEdNq6kbdDS3Sn5cmE7OW63UEUb
                WtC0Hsrr8Tgu44Az+FfrLfQsUqCxNM6AfKktDNtk2J+RMv0qO7NREWHlxQpCHQpSS2ClRUQQoHKp
                7c88B7jzJjwgVtqXKLkZTN37gjQYzKtSWnFJ1OCvAcQT3fRhBcWuAjmwQRjC16abNabrtfce6HUs
                TbxdLmlDzLiApyNFaQFRTpUPdDupSwRxH0Ya9O2+lCSMT8pnes7sve0KcFFPec/pGHkRjU1GeDGS
                JpB8r+z24hQz2M+YfdXUzqdvaIiFu/qFuPccFo1bt1wuUl2Mk8SQwV8uv7uH1Iu0jlBe2y4w42/F
                /wAu8ytLrLiMihaDqSoU7QRXHiK4SdaYibc+mjqrtHqT0627FuU2Erc1pjmLfbItSUupfQaFwNqN
                Slwe8CMKWtemdJy4TWbPc27yBj+7j3xj5E3Z1oiLntqYgLYGpVPiV9JJrT244zIMYa4JyOEAt53t
                Hvc1yeHXExkKPJj8OYlGaAQMjU9uBLis1QYMrrWoMGN6M7cEppurrweWEiO3VS1laglDaUjipaiE
                pA4k0wB6baqAYw83VVak4ZwYepPqN1U9LHqFsx6e7kNouB6c7bh7ktDjbcm3yHI5kc1l9hQKF6HC
                oJUKKHYrPGrfaBEROKqB7e+YT8g3Ljv/ACNYX9g/1RrNIt0eP1X6XS2LuhWmTedrPtrjOJ+v5SWp
                K0K70hxQ8cDNt3GVD4SwXRxhu/8Aot6Xvx26v4TzP+ir+9/Dfe/eePwftYh6Lfx+Un6i85h+uBzf
                skp4ZrPYB3e3DSkBrIjluQkLoM+0Ux4ierGu9B2zrNuz1GM7Wv0BNxtG4tq3liY1UocbUylp9p5l
                xNFNuIWgFKkmvsJGL9vZW4SriopKrt5rVGU0NZqdu30aX+3IVP2ncnd4Ws/aNwpLykzWwOAKFK5b
                tPClfq4Fv9OK1CN8fvGW36orEeotO7L4QMDp3ueHKegSrRIYmNqCFQuS6l/UckpDOnUonsoM8JLt
                p7ZoQazQWtwlwVUig41jgdHehw2HEZ3tva3tp3MohzbtjXRaoCiDpff4p59D7qc+XxJ1/C26b00q
                fVu58By/WJOqdTFz/K0fLxPP9PnMpf6mu2XrZ1p2hfHiSvc+z47iic6Kiy5CKD6EqGGW9UUUxRYb
                EiZ1Mx1EZCppmO/AAMJnv5VH1Fd/Dt7sdnpeUL8uvQ4PsJVOWo9jlKUPgqmXji0SqQJZCElSRUgE
                +A/Tjs5HN/pssqk+q7biszy9u35xZ8PLpT+SqhgjbGhPd9RB9yMB3zZrrF6hZPS65bf2ta7DLeTe
                1L83vAtcyLF7m2E1oteYqpXupyACicmlram64rx7YG97SCBnARvLqRvvYtvPUG070ut5srElE+Vb
                ltPqWg68wtJUSoHgrUQmmVKZYs3CIqEace8U93tnOWmJYCvz8Y3u2t3/API9hsl9k2mVYJjzKFz7
                HMbU2tpxaQdSQqhKFDNJ9hzBwGUZAARC0YNMp/6tlq5d66G3lCKJkW68wFL8WHIroH5HDgXdYoO8
                /SW2f3numRsFOoUAqrs/RheYVO3pR3DhX245PT//2Q==')"
            src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUAAA/
                +4ADkFkb2JlAGTAAAAAAf/b%0d%0aAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQU
                FBQUGBgcHCAcHBgkJCgoJCQwMDAwM%0d%0aDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4OD
                g8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwM%0d%0aDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAUAB
                CAwERAAIRAQMRAf/EAIIAAAIDAQADAAAAAAAAAAAA%0d%0aAAcIBAYJBQIDCgEBAAAAAAAAAAAAA
                AAAAAAAABAAAQMCBAMEBAgMBwEAAAAAAQIDBBEFACESBjET%0d%0aB0EiFAhRYXEygVJiIzNUFQm
                RobHRQoJTNDUWNhfBkrIkVjcYGREBAAAAAAAAAAAAAAAAAAAAAP/a%0d%0aAAwDAQACEQMRAD8AK
                kcRWDIaN9lRkLcc5sNp5aUV1HikGmAqbcPZRlOmVKLrhcOrUSfz4BSPMX1S%0d%0ae8fM6d7HjJt
                9kjBDd6vTagXpri099gFJ7raKgEDNR45ZYBW4NqdZjB5bC5EpxQS23TKtaVrlThgC%0d%0aDZNrx
                pz7bEub4VtelcwJUmraDmoE5U4HIVzywE2az09ajzW48N6fPjvraamuOBLSoyfdVpczqScB%0d%0
                aRXJj7TriodLU2yko50YJUl5PHSts9vtIrgCl0u6vSYG67RbZDcZERSw28HGw2koWO8SmhpnSn4c
                A%0d%0a7n83xvqsX39fBP0fxvZgCO9tZ2Q5Kmx3dQVJdCk04d9WAFszbk6F9qXJwqUxCDr7iUiqi
                lsVIHtw%0d%0aCvS+kO+N4TLluiNtx8QFOKeQylOlxbi1FZKE9qRXM/lwFktnl+3TuuKWYNvet7r
                ZCnWlJUmhIzJN%0d%0aNNFerAdKR5ZN+7fscy6tuJbkCR4VqK0aK5au664tVSU0GQrmTgBhcvL/A
                LxjlNwcjhuIui5DDaiV%0d%0aoJNQo19IyOAGt12q/FduMctyXXojRWlptxNUpJoSUii8iaVA/Bg
                ArKkiJMQphTrnJPMZkEaVjSfe%0d%0aTl2HAMp/ed76zB/pDV7w/fPje9x+RxwG4lvsTlz2zb3IV
                pU2StZW5SnM75zwAK341BsO0d5zby6L%0d%0abEtkKQ5OkFJJQlIzAABJKq0AHGuA8Oh27en/AFE
                sESRs++w7i8wgeJtqylEplQyPMaBS4g19OWAY%0d%0ay2teEC0MxkDKi3G1lK6j0mgJ+E4D2XCEZ
                Z0yIrjjAOopWW1AnKhJBrgK3Mt1sRqirZQQocxxISBn%0d%0a6DlgM8eq+z4zcme1EeizoktbqVR
                3Doej6gta1oJHd9w1ByNK8cAg3UKJYIqnPs6PIhtJaSox3SFU%0d%0acFSSlwE1Ch6fx8cAPfsRX
                1ZP9PfbfvD93/a8PxYD6m9mbqUzteNGMEr8E4toKA40URXAALq1ETMs%0d%0aW83fDNSXZbIVFiu
                0CFSNaOUlRINO+B2YBMdi7aujNsc6pytnJse7LDdnYE1lt9pb0pttQIkMraDT%0d%0aoQoHLUkpO
                eeWAavdN43FD223c4F0mWGVdoaZDUxqMl9xCXE9xRQ53Qc+3ALHtzrV5mXnJgtW+dmd%0d%0aRbd
                bJHKkxXIngpqAgnuPLbCkIKhlU0TXOoGAaPbe8l7qgLny7ZKsl3YUhu52eUkhxl4AqKU9i0ns%0d
                %0aIywCodcbGm2yZl2VGX4WVcWXWpJUqjKSgBSVaTmKkkjAJHvrpB1Cu23Lnuqw7OusiysF11qaq
                jLb%0d%0arTaFFzw6HilboSnvkNpNBgH0/wDNVv8A+LN/9D/YH0yv41+x48fXgNTenlrjPbXbWUV
                KnnKn9Y4A%0d%0aEdXmRbYktxKElgXu3okJVwLa3QCD8NMBS37S04/arXbgkNSnkOzmyoq5UVBBX
                lU6QrgK+nAFiUi1%0d%0aXpybakKSyhMdqKEK01004oCsqcRTtwAW2z0MsG1E72i/YTsuRvZbK7n
                cYiQDqYBQ07HCT8wrSaKK%0d%0aAkntJGAsTtnibdgNQg46tyIgJJdI5ulKaAKIJBNOKgcAKZMJr
                ee4rdavBszHLdzpKW3TqZBSmtVA%0d%0a5VNKVI4VwBRjWyRMhPR9z25K74qUxGampeU62Yz7ZLb
                TTagA0lLaiXEjjT0YAi1/11+D0YA59M2w%0d%0aNpsj9IPu6v8ANgAn1sgresl5QyBzVXO3FsnPP
                xDfZgE42Punfdk3Ff7pZ2o15U44pufAuOvSC2dY%0d%0aLakpUU5DTQihwBhgTd435Yvd8VZm40t
                9Eh1q2xn0SWikkKaDjiwlVRlUpRp454Al2PfzirPOtshI%0d%0aTc7SS1JXxUpCs23K5e8nj664A
                T7tuzj7BejlSnnq1VwGqmn/ABOA5XSi3Q7juC8xZVyVFMWHzprj%0d%0abiW31oUsakpKuANaKIz
                ocAwkOBrK3S3/ALVl91dvWqup3XkX1aqnNPdFez1UwE7w/q7cAx3TS3Qm%0d%0adlR5UvlsNa3XJ
                Eh4hCEgKNSVKIAAwCZeZDzDdBNsPTdrxupdlu28rjKgGzbetDwuLhlNSW1ht9cb%0d%0aW2yCEkH
                mKGAXNm12+budO7IF/uGzF3dKnIN0jF16E4EkoLMmOlQBCk0IIoflCmAJj8XfTyIybT1M%0d%0as
                BaW4Ui3NwXZy3m6gija1oWg0HHX6zgOp9nSbG/Jl32VHdltxHEvuRgUIdC1JLYKSVEEKByqe3PP%
                0d%0aAD3d9/iworCtSW3FJKnBXgOIr+bAFny0WW1XXbO5tzupYm3i5XNLbzLiApyNEaQFRjpUMg8
                VKWCM%0d%0ajT5OAYOTENTl7cBz/Cq+L24D5md1dS+pu9oiYW7+oW49yQWjVq3XC5yXoyTxqGC5y
                6/q4AYoZcYc%0d%0abfinw7rK0uMuI7pQtB1JUKcCCK4Db/yxdVdndSenO3Yl0nQjuizxzEvtkWp
                KXUvpNOYEKNSlwd4E%0d%0aezswDLTJ2y7PDXcW3GYKo41LT+kr2kmtBn24Bdb3vZi+zXZ4dcRFQ
                pXJjcOYlOaAQMjU9uAFl78d%0d%0af5TTYLr/ADlhKY7YKlrLiglDaEjipaiEpA4k0wA08ynUHqn
                5WPMHZP7e7lNmuX9uNtw9yWpbbcmB%0d%0aIcjmRzWX2FgoWEOFWlQoodis8AWthfehWmRbmI/Vb
                pdKbuyFaZF62s+2qM4n4/hJagtCvUHCMAbP%0d%0a/on5YPrW6/3XxH8FV9J9W+m9/wBfufKwGJK
                7fzfmkJ9az2Aej4cBFdtqEhdB7RgGv8h2zbNuzzGM%0d%0a7Wv9vTcbPuLat5YmNVKHG1MpafaeZ
                cTRTbiFt1SpJr8BIwGp+7PJnf7ahU/adyd3haz843ClPKTN%0d%0abA4ApUrlu09VK/FwAUPTvdE
                KU9AlWiQxMbUEGGWXQ/qOSUpZ0alE9gSM8A4PRroX/IcVnfG+Le2N%0d%0azqIc25Yl0WqAog6X3
                6VTz6HupFeXxrr90Mp/vONsvWzrTtG+vFRXufZ0dxROdFRZchFB7EqGAzmY%0d%0aYVSoFTTMHgc
                BI8M38Q8a8O30YC9tr8OspcHzEqnLV6HAKUPqUBl6/bgIEo6UqUkVIFc+z8+Ac77t%0d%0allUnz
                X7cVmeXt6+uL9nh0p/KrAbOdYfMJK6X3Pb+1rVYZbovil+L3iprmRI3obYTWi15iqld1OQA%0d%0
                aUeAAjeXUjfexbeeoFo3ndbzZ2JKJ8u3qbfUpB15haSolQPBWohJGVKZYBvts7vPUew2S+ybTKsE
                1%0d%0a5lC59kmNqbW04tIOpIUKlCgapPwHMHAZS/e32rl3nobeUIomTbrzAUv1sORXQK+xw4DIi
                EnUKAVV%0d%0a2ev1YDs0R8VPCvw4D//Z"
            onclick="alert('clicked');"
            style="border-width:0px;"
        >
    </body>
</html>

If, instead, you put the Base64 string on one line one (as shown here below) then it works like a charm!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title></title>

        <script type="text/javascript">
            function onMouseOut(item, value) {

                item.src = "data:image/png;base64," + value;
                //item.setAttribute('src', src3);
            }
        </script>
    </head>
    <body>

        <input
            type="image"
            name="ctl00$ContentPlaceHolder1$rptCompanyProfile$ctl00$rptCompanyProfile$ctl00$ImageButton1"
            id="ctl00_ContentPlaceHolder1_rptCompanyProfile_ctl00_rptCompanyProfile_ctl00_ImageButton1"
            onmouseout="onMouseOut(this,'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')"
            src="data:image/jpg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAUAAA/
                +4ADkFkb2JlAGTAAAAAAf/b%0d%0aAIQAAgICAgICAgICAgMCAgIDBAMCAgMEBQQEBAQEBQYFBQU
                FBQUGBgcHCAcHBgkJCgoJCQwMDAwM%0d%0aDAwMDAwMDAwMDAEDAwMFBAUJBgYJDQsJCw0PDg4OD
                g8PDAwMDAwPDwwMDAwMDA8MDAwMDAwMDAwM%0d%0aDAwMDAwMDAwMDAwMDAwMDAwM/8AAEQgAUAB
                CAwERAAIRAQMRAf/EAIIAAAIDAQADAAAAAAAAAAAA%0d%0aAAcIBAYJBQIDCgEBAAAAAAAAAAAAA
                AAAAAAAABAAAQMCBAMEBAgMBwEAAAAAAQIDBBEFACESBjET%0d%0aB0EiFAhRYXEygVJiIzNUFQm
                RobHRQoJTNDUWNhfBkrIkVjcYGREBAAAAAAAAAAAAAAAAAAAAAP/a%0d%0aAAwDAQACEQMRAD8AK
                kcRWDIaN9lRkLcc5sNp5aUV1HikGmAqbcPZRlOmVKLrhcOrUSfz4BSPMX1S%0d%0ae8fM6d7HjJt
                9kjBDd6vTagXpri099gFJ7raKgEDNR45ZYBW4NqdZjB5bC5EpxQS23TKtaVrlThgC%0d%0aDZNrx
                pz7bEub4VtelcwJUmraDmoE5U4HIVzywE2az09ajzW48N6fPjvraamuOBLSoyfdVpczqScB%0d%0
                aRXJj7TriodLU2yko50YJUl5PHSts9vtIrgCl0u6vSYG67RbZDcZERSw28HGw2koWO8SmhpnSn4c
                A%0d%0a7n83xvqsX39fBP0fxvZgCO9tZ2Q5Kmx3dQVJdCk04d9WAFszbk6F9qXJwqUxCDr7iUiqi
                lsVIHtw%0d%0aCvS+kO+N4TLluiNtx8QFOKeQylOlxbi1FZKE9qRXM/lwFktnl+3TuuKWYNvet7r
                ZCnWlJUmhIzJN%0d%0aNNFerAdKR5ZN+7fscy6tuJbkCR4VqK0aK5au664tVSU0GQrmTgBhcvL/A
                LxjlNwcjhuIui5DDaiV%0d%0aoJNQo19IyOAGt12q/FduMctyXXojRWlptxNUpJoSUii8iaVA/Bg
                ArKkiJMQphTrnJPMZkEaVjSfe%0d%0aTl2HAMp/ed76zB/pDV7w/fPje9x+RxwG4lvsTlz2zb3IV
                pU2StZW5SnM75zwAK341BsO0d5zby6L%0d%0abEtkKQ5OkFJJQlIzAABJKq0AHGuA8Oh27en/AFE
                sESRs++w7i8wgeJtqylEplQyPMaBS4g19OWAY%0d%0ay2teEC0MxkDKi3G1lK6j0mgJ+E4D2XCEZ
                Z0yIrjjAOopWW1AnKhJBrgK3Mt1sRqirZQQocxxISBn%0d%0a6DlgM8eq+z4zcme1EeizoktbqVR
                3Doej6gta1oJHd9w1ByNK8cAg3UKJYIqnPs6PIhtJaSox3SFU%0d%0acFSSlwE1Ch6fx8cAPfsRX
                1ZP9PfbfvD93/a8PxYD6m9mbqUzteNGMEr8E4toKA40URXAALq1ETMs%0d%0aW83fDNSXZbIVFiu
                0CFSNaOUlRINO+B2YBMdi7aujNsc6pytnJse7LDdnYE1lt9pb0pttQIkMraDT%0d%0aoQoHLUkpO
                eeWAavdN43FD223c4F0mWGVdoaZDUxqMl9xCXE9xRQ53Qc+3ALHtzrV5mXnJgtW+dmd%0d%0aRbd
                bJHKkxXIngpqAgnuPLbCkIKhlU0TXOoGAaPbe8l7qgLny7ZKsl3YUhu52eUkhxl4AqKU9i0ns%0d
                %0aIywCodcbGm2yZl2VGX4WVcWXWpJUqjKSgBSVaTmKkkjAJHvrpB1Cu23Lnuqw7OusiysF11qaq
                jLb%0d%0arTaFFzw6HilboSnvkNpNBgH0/wDNVv8A+LN/9D/YH0yv41+x48fXgNTenlrjPbXbWUV
                KnnKn9Y4A%0d%0aEdXmRbYktxKElgXu3okJVwLa3QCD8NMBS37S04/arXbgkNSnkOzmyoq5UVBBX
                lU6QrgK+nAFiUi1%0d%0aXpybakKSyhMdqKEK01004oCsqcRTtwAW2z0MsG1E72i/YTsuRvZbK7n
                cYiQDqYBQ07HCT8wrSaKK%0d%0aAkntJGAsTtnibdgNQg46tyIgJJdI5ulKaAKIJBNOKgcAKZMJr
                ee4rdavBszHLdzpKW3TqZBSmtVA%0d%0a5VNKVI4VwBRjWyRMhPR9z25K74qUxGampeU62Yz7ZLb
                TTagA0lLaiXEjjT0YAi1/11+D0YA59M2w%0d%0aNpsj9IPu6v8ANgAn1sgresl5QyBzVXO3FsnPP
                xDfZgE42Punfdk3Ff7pZ2o15U44pufAuOvSC2dY%0d%0aLakpUU5DTQihwBhgTd435Yvd8VZm40t
                9Eh1q2xn0SWikkKaDjiwlVRlUpRp454Al2PfzirPOtshI%0d%0aTc7SS1JXxUpCs23K5e8nj664A
                T7tuzj7BejlSnnq1VwGqmn/ABOA5XSi3Q7juC8xZVyVFMWHzprj%0d%0abiW31oUsakpKuANaKIz
                ocAwkOBrK3S3/ALVl91dvWqup3XkX1aqnNPdFez1UwE7w/q7cAx3TS3Qm%0d%0adlR5UvlsNa3XJ
                Eh4hCEgKNSVKIAAwCZeZDzDdBNsPTdrxupdlu28rjKgGzbetDwuLhlNSW1ht9cb%0d%0aW2yCEkH
                mKGAXNm12+budO7IF/uGzF3dKnIN0jF16E4EkoLMmOlQBCk0IIoflCmAJj8XfTyIybT1M%0d%0as
                BaW4Ui3NwXZy3m6gija1oWg0HHX6zgOp9nSbG/Jl32VHdltxHEvuRgUIdC1JLYKSVEEKByqe3PP%
                0d%0aAD3d9/iworCtSW3FJKnBXgOIr+bAFny0WW1XXbO5tzupYm3i5XNLbzLiApyNEaQFRjpUMg8
                VKWCM%0d%0ajT5OAYOTENTl7cBz/Cq+L24D5md1dS+pu9oiYW7+oW49yQWjVq3XC5yXoyTxqGC5y
                6/q4AYoZcYc%0d%0abfinw7rK0uMuI7pQtB1JUKcCCK4Db/yxdVdndSenO3Yl0nQjuizxzEvtkWp
                KXUvpNOYEKNSlwd4E%0d%0aezswDLTJ2y7PDXcW3GYKo41LT+kr2kmtBn24Bdb3vZi+zXZ4dcRFQ
                pXJjcOYlOaAQMjU9uAFl78d%0d%0af5TTYLr/ADlhKY7YKlrLiglDaEjipaiEpA4k0wA08ynUHqn
                5WPMHZP7e7lNmuX9uNtw9yWpbbcmB%0d%0aIcjmRzWX2FgoWEOFWlQoodis8AWthfehWmRbmI/Vb
                pdKbuyFaZF62s+2qM4n4/hJagtCvUHCMAbP%0d%0a/on5YPrW6/3XxH8FV9J9W+m9/wBfufKwGJK
                7fzfmkJ9az2Aej4cBFdtqEhdB7RgGv8h2zbNuzzGM%0d%0a7Wv9vTcbPuLat5YmNVKHG1MpafaeZ
                cTRTbiFt1SpJr8BIwGp+7PJnf7ahU/adyd3haz843ClPKTN%0d%0abA4ApUrlu09VK/FwAUPTvdE
                KU9AlWiQxMbUEGGWXQ/qOSUpZ0alE9gSM8A4PRroX/IcVnfG+Le2N%0d%0azqIc25Yl0WqAog6X3
                6VTz6HupFeXxrr90Mp/vONsvWzrTtG+vFRXufZ0dxROdFRZchFB7EqGAzmY%0d%0aYVSoFTTMHgc
                BI8M38Q8a8O30YC9tr8OspcHzEqnLV6HAKUPqUBl6/bgIEo6UqUkVIFc+z8+Ac77t%0d%0allUnz
                X7cVmeXt6+uL9nh0p/KrAbOdYfMJK6X3Pb+1rVYZbovil+L3iprmRI3obYTWi15iqld1OQA%0d%0
                aUeAAjeXUjfexbeeoFo3ndbzZ2JKJ8u3qbfUpB15haSolQPBWohJGVKZYBvts7vPUew2S+ybTKsE
                1%0d%0a5lC59kmNqbW04tIOpIUKlCgapPwHMHAZS/e32rl3nobeUIomTbrzAUv1sORXQK+xw4DIi
                EnUKAVV%0d%0a2ev1YDs0R8VPCvw4D//Z"
            onclick="alert('clicked');"
            style="border-width:0px;"
        >
    </body>
</html>

P.S.: actually Firefox seems to be the only browser which handle correctly multiline Base64 even in "src" attribute (at least on my PC): Internet Explorer and Chrome fail to set the src attribute too, so it is advisable to remove line feeds even for base64 data in src attribute

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top