0

I've tried to replace the actual cursor for my website blog page, changing with my svg logo to get a space invader for cursor.

svg-custom-cursor

But when I refresh my page I can't see it.

Here is the page https://chichportichbenjamin.mydurable.com/blog and the added code to the website builder:

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <style>
        /* Styles CSS */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f3f3f3; /* Couleur de fond moderne */
            position: relative; /* Ajout pour que le pointeur de souris suive correctement */
        }

        .custom-cursor {
            width: 45px; /* Taille du curseur */
            height: 27px;
            background-image: url('data:image/svg+xml;base64,iVBORw0KGgoAAAANSUhEUgAAAXcAAADhCAYAAAAziPUUAAAAAXNSR0IArs4c6QAAAHhlWElmTU0AKgAAAAgABAEaAAUAAAABAAAAPgEbAAUAAAABAAAARgEoAAMAAAABAAIAAIdpAAQAAAABAAAATgAAAAAAAAJYAAAAAQAAAlgAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAAXegAwAEAAAAAQAAAOEAAAAA4m/NTAAAAAlwSFlzAABcRgAAXEYBFJRDQQAAGnlJREFUeAHtnW2MJMV5x7u6Z1+sPSBBiU0ciLEjJUGR7ThnOcGfkJCs5ItvObgz3O1yeyExjhwhxUmQ7CjKRZEsOZITiOXIlmzfcXvciVtgd0/AYSkO/gR28MVOjOBCIiFiXny8CAMGbndmuvL07O3u7PTsbk9PV3dV12+l1UxXVz31PL+n5z811d3VKsjwNzV1/4dVpD4ahOrXtNY7tFavqyD4SVu1Hjtx5IazGUxQBQIQgAAESiQgGt3/b3Jm/hcmtLpNhcEfqUC9r3+tINCBfkHp4FSs9fzy283vzs3tXd6sLuUQgAAEIFAOgb7iPnVg4eZAqTuUCn5xEDe0Dt4IVPBgEMcLb7wWnj51atebg7SnLgQgAAEIFENgg7hfc82hxuVXfuRrIuq3DGtepm+W5QviO0qE/rxqnpo7svenw9qkPQQgAAEIZCPQLe5qembhhAjyp7I1zV5LRvRaKf29INYLy1ov3HN099PZW1MTAhCAAAQGJbAm7lMzi38rI/ZDgxrIV18/FcdqQet44fjR6x4XGzqfHVpBAAIQgEA/Ah1xv/HmxY80ouDfZaPRr5LJsuSEbBCoRS3TN2efeOmRM2dubZrsD9sQgAAEfCDQEXcZtZ+WUfsfVB2wCP3rIvQPcUK26kzQPwQg4DoB9anp+68abURP2hYIJ2Rtywj+QAACLhFQ5c6150PTfUJWt8PFY8d2/Xc+S7SCAAQg4AcBEfeFf1VKXetWuJyQdStfeAsBCJRNQC5/XHxRbjy6rOyOi+qPE7JFkcQOBCBQJwKJuL8j4j5eh6A4IVuHLBIDBCBQBIFkWuZtmZZ5VxHGbLLBCVmbsoEvEIBA2QSSu1KfkbtSryy74zL76z4hyx2yZZKnLwhAoCoCybTMgkzL7KrKgWr65YRsNdzpFQIQKItAcink5+QGpi+X1aFt/XBC1raM4A8EIFAEATU1tfibaiTggRtCkxOyRRxS2IAABGwg0Fl+YPrggtyhqq6ywSFbfOCErC2ZwA8IQCAPgY647z+w+MUwDD6fx4APbTgh60OWiREC9SLQEfd9N89/LIrC79crNJPRcELWJF1sQwACwxPoiLuYUVMHF56TZ6W+d3iTflnghKxf+SZaCLhCYFXcg6mDi/8iG3/qiuM2+skJWRuzgk8Q8JPAmrjvPzD/iTAMv+0nhuKj5oRs8UyxCAEIZCewJu579pwcHZsYe1mueb84e3NqZiHACdkslKgDAQgUSWBN3BOjMjVzXApuKrIDbPUjwAnZflQogwAEiiOwUdwPzO9VYXhPceaxtB0BTshuR4j9EIBAHgIbxP2Tn1y86OJL9SuySuRoHmO0GY4AJ2SH40drCEBgncAGcU+KZWrmISn8w/UqvKuIwJIOgn9TcbxwXjVPzR3Z+9OK/KBbCEDAQQIpcZ8+MP/pIAy/7mAstXWZE7K1TS2BQcAYgZS475k5edlYMPaCXDWT2mfMCwwPSIATsgMCozoEvCPQV8BlIbFH5abVq72j4WDAnJB1MGm4DIESCPQX9wPzt8vUzJdK6J8uCiTACdkCYWIKAo4T6CvurPHueFZX3OeEbC3SSBAQyEegr7gnpljjPR9QG1utnpDVWs0vxUvH547ufd5GP/EJAhAojkC4mak4Vgub7aPcLQIrJ8fV1fL6D2Ph6LNTMwv3Jr/O3IoCbyEAgUEIbCruWseI+yAkHakrN6hF8n+9GtE/lufn/pW4vemvN0dCwk0IQKAPga0+2Kzx3gdY3YpkyuaupbeWbpmb29uuW2zEAwGfCWw6chcocoOkWvQZjg+xy1TNgdGJ0Tt9iJUYIeATga3EPdBy67tPMHyNNVTqs1OyaJyv8RM3BOpIYEtxX367+d2Va6frGDoxdRNQKrxT1vTf0V3GewhAwF0CW4q7zMMuy9TMQ+6Gh+eZCajgstGJkT/OXJ+KEICA1QQa23qXTM2EIQ/w2BaU+xXCIEzE/Q4bI5mePjpx/vz4VhcA5HJ7fPy8np29+a1cjWlkDYFrrjnUuOKKD4yZcEiOu1gGuu+YsG3S5rbi/sZr4WlZ432ZNd5NpsES2yr47enpk++fnd37jCUerbmhGxc/P75DXbJWUNAbrUfl12lgRBQKchEzGQhcceWHpwIVHs5QdeAq4zv0Y9Lo4wM3rLjBltMyiW+nTu16M1DqOxX7SfdlEYjGPlpWV/QDAQiYI7CtuCddJw+MMOcClq0ioOP3W+UPzkAAArkIZBL35ElAyfokuXqgkVME4iC4yCmHcRYCEOhLIJO4J494U0p/r68FCmtFIAyDt2sVEMFAwFMCmcS9wybWTM14cJC0dfCcB2ESIgRqTyCzuC9rxL32R4MEqJrqjA9xEiME6k4gs7jfc3T307LczFN1B+JzfHJe5Zm775580mcGxA6BuhDILO5JwKzxXpe0bxrHXZvuYQcEIOAUgYHEnTXencrtQM4mawjFyz//54EaURkCELCWwEDifvzodY+LCLxgbTQ4lpuAivVfHD++/7XcBmgIAQhYRWAgcRfPWePdqvQV5IyW5VXuuu6bBVnDDAQgYAGBQcWdNd4tSFqRLshJ1Ief/PG5W4q0iS0IQKB6AgOLe2eNdx28Ub3reDAsgUTYXz337OSZM7c2h7VFewhAwC4CA4t7Z413FTxoVxh4MyiBVWE/ffq2pUHbUh8CELCfwMDi3gmJhcTsz+wWHiLsW8BhFwRqQiCXuCdrvGutk3Ww+XOMAMLuWMJwFwI5CeQSd9Z4z0m74mYIe8UJoHsIlEggl7gn/rHGe4lZKqArhL0AiJiAgEMEcos7a7y7k2WE3Z1c4SkEiiKQW9xZ472oFJi1g7Cb5Yt1CNhKILe4dwJijXdb89rxC2G3Oj04BwGjBBrDWE/WeB8Ngi8NY4O2ZgjUTth18ICsazRRNC0lZ4+mZuYni7a7Yk+fP3Zk98NmbLtn9cYbF9/bGI8/ZsLzWAe/rgIzz5xQQXDWhM+mbYrfw/1NH1yQ9b/VVcNZoXWRBGon7EXC6bG1Z8/J0fEdY2Zu5NLB87NHdl3e06W3m/tm7t8dqeg+MwD0D2cPT/6uGdtuWh1uWkZiZo13uxKPsNuVD7wph4DWShY15K+bwNDizhrv3TirfY+wV8uf3rcmoOLQmADLlIwx21tHZe/eocWdNd7tSC7Cbkce8GJzAjqMh54G3tw6e3oJDC3uYpA13nuplryNsJcMnO7sIyBDd/ucqtajIsSdNd4rzCHCXiF8uh6IgMlpGebc06koRNzPPvHSI8kzONPmKTFJAGE3SRfbRRNgWqZoolvbK0TcVx72oB7auiv2FkkAYS+SJrbKIGBy5M4J1XQGCxH3jlnWeE/TNVSCsBsCi1mjBEyO3DVz7qncFSburPGeYmukAGE3ghWjJRAwOXIvwX3nuihM3Fnj3XzuEXbzjOnBUQLcxJRKXGHinlhmjfcU38IKEPbCUGKoIgImp2WUkk8IfxsIFCrurPG+gW1hGwh7YSgxVCEBpmXKhV+ouLPGe/HJQ9iLZ4rFagiYHLnL54SRe09aCxX3jm3WeO9BnH8TYc/Pjpb2ETA7cmfhsN6MFy7uyRrvvZ2wPTgBhH1wZrSwm4DJkbvdkVfjXeHifs/R3U/LcjNPVRNOPXpF2OuRR6LYSMDkyF1xnftG2LJVuLgnPbDGe4pz5gKEPTMqKjpGwOTIXcufYziMu2tE3FnjPV/eEPZ83GgFASGAuPccBkbEnTXeeyhn2ETYM0CiitMETE7LOA3GkPNGxF18lW9RtWjI59qZRdhrl1IC6kPA5LSMkruY+nTpdZEpcWeN94yHFcKeERTVILAFAebc03CMPfZq586vj1z1ofe8rAJ1SbpbShICCHv242D/gfm/l2NpPHuLjDXDIBK7f56x9kDV5L6an+tYfUUuMWiHoYpXBChMXjqjzNVb5pVKP1s0ltq9nYmNTJ9XOee1oZ48yGLDtoxyu7Y31u3et9qu2163D+Jhx85qvVDJ2owX/pKf7slb6brzKqsDyBv1G1K6a7VOka/iyzPS2zdWfUr8TPxe9W0lrjh5WfM52b8aT9IuqbsaQ+J/4nunUAfPzt41+dUi/S3D1loyTHQ2dXDxuHRwkwnbrtuUg+nhV889O3n69G1LrsdShv9TBxd+xkChDNL0kSagH5s9PPnxdLndJcamZTphs8Z73+wj7H2xUAgBCBRIwKi4s8Z7OlMIe5oJJRCAQPEEjIo7a7xvTBjCvpEHWxCAgDkCRsU9cZs13leSh7CbO4ixDAEIpAkYF3fWeOeqmPRhRwkEIGCagHFx932Nd0bspg9h7EMAAv0IGBf3TqeervGOsPc75CiDAATKIFCKuPu4xjvCXsbhSx8QgMBmBEoRd9/WeEfYNzvcKIcABMoiUIq4J8H4ssY7wl7WoUs/EIDAVgRKE3dZx6H2j99D2Lc61NgHAQiUSaA0ca/7Gu8Ie5mHLX1BAALbEShN3MWRZKG1Wq7xjrBvd5ixHwIQKJtAmeJeyzXeEfayD1n6gwAEshAoVdzPPvHSI7LG9etZHHOhDsLuQpbwEQJ+EihV3M+cubUpUzMP1QE1wl6HLBIDBOpLoFRx72CswRrvCHt9PxBEBoG6EChd3F1f4x1hr8uhTxwQqDeB0sXd5TXeEfZ6fxiIDgJ1IlC6uCfwXFzjHWGv02FPLBCoP4FGFSEma7yP6bGvJY9Dr6L/QftE2LMR27Pn5KXjE2OfkLuRm3GoW4EOm/L0+JaW11C223Es76NmGCWv7WbUHmlJUbPZaLfG4qi5tNRujYw0pWCk+fLEW61ffmuiOTe3t93pXR5F78bRko0VtSBgmkBl4jp9cOFRGcNfbTrAYe0j7NkJ7jswvzMKwx9kb5G1pk6ushrJWnvQevJldGc7bn9r0Hbb1Y/CkRvkK+lvtqvn0/5Y68/LF3rhV8xF0chnRcw+bYKlaEAytFg2Ybt1/q33nTix75wJ25WM3DuBJGu8h3aLO8I+2CEXhrHchWxips+csK9EqF48cfSG/xos2u1rTx+Y//1AmeCxfd8W1/g/E6z3H5h/SYVmWF/4zThmgmlrrGFsgG2GRgYKtq/xjrBnSCJVIAABawlUJu42r/GOsFt7vOIYBCCQkUBl4p74Z+Ma7wh7xiOHahCAgNUEKhV329Z4R9itPlZxDgIQGIBApeJu0xrvCPsARw1VIQAB6wlUKu5Cx4o13hF2649THIQABAYkULW4V77GO8I+4BFDdQhAwAkClYt7lWu8I+xOHKM4CQEI5CBQubhXtcY7wp7jaKEJBCDgDIHKxb1DquQ13hF2Z45PHIUABHISsELcy1zjHWHPeaTQDAIQcIqAFeKerPEuS/6dNk0OYTdNGPsQgIAtBKwQ9wRGHLe/YRIKwm6SLrYhAAHbCFgj7ncf3f2gXPZuYLlYsaqDh1899+zk6dO3LdmWAPyBAAQgYIKANeIuwemgFfyZ3NXUKjJQhL1ImtiCAARcIWCTuAezs5PfV7G+vSh4CHtRJLEDAQi4RsAqcU/gzd41+U+yoNjfDQtSHp4yz1TMsBRpDwEIuErAOnFPQB47ct0heRzXfhl5vzEoWC0P55T/Lx47/KMbmGMflB71IQCBuhCwUtwTuHcfmTwetFq/pWOdXEWT7USo1t+WL4XfO3Zk8q+D4FBclyQRBwQgAIFBCVT3DNUMnh47dv2LUu1P9uw5+YXRibHJMNDXahV8UB6W/G6ldUMH6rVABWflIYSPtnTz3hNHbjibwSxVIAABCNSegLGHs9aenKMBXjNzePyy+NKrorDVkCdhNZSKRqKw3Xkvj3hvBCoeCaVch7Kvsz8eScq1TurGSVlnO3kv02YyOAhHkleldPKk318NlNrnGho5x/OPzXbnF2Khro9E0V55uPKhQo06bkyOldub7fYDRYcxGoW3ybH3maLtmrfXvrbVjl8x0Q/iboKqxTZvuvneDzWikf+02EVcgwAECiBg7Zx7AbFhAgIQgIC3BBB3b1NP4BCAQJ0JIO51zi6xQQAC3hJA3L1NPYFDAAJ1JoC41zm7xAYBCHhLAHH3NvUEDgEI1JkA4l7n7BIbBCDgLQHE3dvUEzgEIFBnAoh7nbNLbBCAgLcEEHdvU0/gEIBAnQkg7nXOLrFBAALeEkDcvU09gUMAAnUmgLjXObvEBgEIeEsAcfc29QQOAQjUmQDiXufsEhsEIOAtAcTd29QTOAQgUGcCiHuds0tsEICAtwQQd29TT+AQgECdCSDudc4usUEAAt4SQNy9TT2BQwACdSaAuNc5u8QGAQh4S6DhbeQEXjgBrYP/0XH7cyoMWrEKtYq1VkpKu/6SkmRTh0pqxCvvY6nV2Vbyp8OkThy2EwsqlprJa6DUrOx8V5cp3kKgHAJaP621/oKRzkL1TTm4LzFhG3E3QdVTmyLMrxw7uvsBE+FPzSx+S+wi7ibgYnNrAip49diR6+7bulK+vVMHF78qLY2IO9My+XJCqz4EZMQd9ymmCAIQqIAA4l4B9Lp2KZMnG6Zg6honcUHABQKIuwtZcsRHmZc0Ju4y5dOZn3cEBW5CoHICiHvlKcABCEAAAsUTQNyLZ+qzRWMjd5+hEjsE8hBA3PNQow0EIAABywkg7pYnCPcgAAEI5CGAuOehRpvSCch8DydUS6dOhy4TQNxdzp59viPA9uUEjzwlgLh7mnjChgAE6k0Aca93fokOAhDwlADi7mniTYSdLPtlwi42IQCBwQkg7oMzo0UVBC6sJllF1/QJARcJIO4uZs1Sn2XxAUbuluYGt/wjgLj7l3MihgAEPCCAuHuQ5PJCZHGv8ljTEwS2JoC4b82HvRCAAAScJIC4O5k2O51OHoZnp2d4BQH/CCDu/uWciCEAAQ8IIO4eJLmsEFcffl1Wf/QDAQhsTgBx35wNewYlwNOSBiVGfQgYI9AwZhnDEHCEgA70Z9qt+GzirgqjzgNHQrX+yMB2HK89hGS1fLVe0qbd7tofrrQL2yt2Ovu7bKlwpW673Vi3eaEsqRteeN/abH9rxX57Q5suWxd8aV3YH8dh3IjDtXMhq+VhtO5z1BpZ86UZtjvvo277rfW6zWilbtRcL4uilTaJ/+dV0I7CkTBcXt/fbKzvj6LRFfvL62XLXe2j5bHO/kajtebTUlf7xtJKeaMxvrb//PmWHp8YvSNQal/iA38rBBB3joTCCChHb2LSuv0fJ2avf7wwEBgqncDUzOI7a99gpfduZ4dMy9iZFye9Em138vMlo2w+B04ecetOq0DH61u8SwhwUHMceE8gjtpOfil5n7guALL00No0TVex128Rd6/TX2zw8vlyUiTj2M1fHMVmz3Frev0cieORFOY+4l4YSgwFjs65R9H6CUey6CgBpZiW6Ukd4t4DhM38BIzOuXddcZLfw/4tdcy0TH8yDpUyck8lC3FPIaEgLwFXp2WU4oRq3pxb004zcu/NBeLeS4Rt7wjEPAjE+ZzLwIITqj1ZRNx7gLCZn4B8vJw8oZo/YlraQkBuRGPOvScZiHsPEDaHIODoM1SZcx8i55Y0VUHIyL0nF4h7DxA28xMweYeq/CQw9uGNIi6FzJ91O1pqpmVSiUDcU0goyEtAfho7OS0j66846XfePNWxnTxKgGmZnsQi7j1A2ByCgMGHdchywsZG7kNETFNLCOiYE6q9qUDce4mwnZuA3KDq5AhYVjV00u/ciaphQx0ycu9NK+LeS4Tt3ARkcG1OJJlTzZ0XHxrK4cEvu55EI+49QNjMT0CU3Zi4y6QMH978qal9S5m2Y869J8uIew8QNocgYHBaRi6hR9yHSE3dm3ITUzrDiHuaCSU5CZicluHDmzMpnjSTsz18+ffkGnHvAcJmfgImr3OXj66xD2+765F4+aOnZZUEmJZJ00fc00woyUnA7KqQ5uZUV59bmjNsmllAgF926SQg7mkmlOQlYPI69yAwdsIs1qEx23lR0m4wAozc07x4QHaaSa1LRMiaMr/xv3I3f3Jxd/KI+s50h1zF2HntnjfvXP1y4SRpUp5Mu3RG5yLiculZUpK8hnIBpLwm17jrF03BkynVn4iDTSP2VbBj//77Ljdi25DR5eX2m3Nze183YX56+v53x7EeNWHblE2t44Ychc8Zsa+Dc0bsilE5rl8wdVwbu3TNFAzsQqBoAlMzCz+Ur6nfKdquYXtfnj286y9N9DE9s/ADEcqdJmybsikCeeLY4V37TNl30S7TMi5mDZ+LJhAVbdC0PZO328uvM/emqWTobpq5a/YRd9cyhr+FE5BZJec+ByZvt5epgs4UXeGgTRpMJg3520DAuYN6g/dsQKAYAs6N3E3ebu/kyJ2HdaQ+CYh7CgkFvhGQIZ974m5wffvkLLlrx4B4zLRMT9IQ9x4gbHpIQLkn7qK+xsTMxcsKuUM1/blF3NNMKPGOgHZv5G7wdnsnhZKFw1KfWsQ9hYQCDwk4J+4mR9eyeq6xXwWmji35rnPOZ1MsVu0i7qskePWXgHZvWsbkvHhya5prB0PnFjvXnDbsL+JuGDDmnSDAyL0rTTJyd07c5RwwI/euHCZvEfceIGx6SEA5eJ27UQF27yYmRu7pzy3inmZCiW8EmJbpybh7I3cXzxP0QC98E3EvHCkGHSTAtMyGpLk3chchY1pmQw6ZlunBwaanBJwTd7OXK7o3co8NXhrq6meCkburmcPvwgjI0qjOibvJm5hkIVrnRsGy7rRzPhd2AG9iCHHfBAzFHhFQDt7EZHD5gWSRcdeyL6sPIO49SUPce4Cw6SUB50buJkfXJhclM3V0yQVPzn0hmWKxahdxXyXBq8cE3LsUUp6JZU7MlHtTHFwtk/74Iu5pJpR4ReCQm58Bg3PMIpTmvjgMHVtc554G6+aBnY6DEgjkIrBz5684OCUjkzIGBVgeXuLc/HXIHaqp4x9xTyGhwCcCF31w1Elxjw1Oy2gHn8QkPzWc+0Iy/TlD3E0Txr7VBK5oR06Ku8lL/1wcuZu97t/qQ3hT5xqb7mEHBDwg8MorP2v90nsu/oprobYD9SNTPssQ+EGZ5njelH0TdttB8KgJuy7b/H9nddcZ01WzzAAAAABJRU5ErkJggg=='); /* Image du curseur */

            background-size: cover;
            cursor: none; /* Désactiver le curseur par défaut */
            pointer-events: none; /* Éviter que le pointeur interfère avec les éléments */
            position: fixed; /* Position fixe pour suivre la souris */
            transition: transform 0.3s ease;
            z-index: 100; /* Assurer que le point reste au-dessus de tous les autres éléments */
        }

        .custom-cursor:hover {
            transform: scale(1.2);
        }

        /* Masquer le texte "Fabriqué avec" et le lien vers Durable */
.body-normal span {
    display: none;
}

/* Masquer les liens vers Durable */
a[href*="durable.co"] {
    display: none;
}

    </style>
</head>
<body>
    <!-- Contenu HTML -->
    <div class="custom-cursor"></div>

    <!-- Script JavaScript pour le pointeur de souris -->
    <script>

var style = document.createElement('style');
style.innerHTML = `
    /* Définition du curseur personnalisé */
    body {
            cursor: url(
        document.addEventListener('mousemove', function(event) {
            const point = document.querySelector('.point');
            point.style.left = event.clientX + 'px';
            point.style.top = event.clientY + 'px';
        });
    </script>
</body>
</html>
1
  • You can’t see it because you are not using the right syntax to declare your cursor. Commented Feb 26, 2024 at 3:50

1 Answer 1

0
Your style.innerHTML should be 

style.innerHTML = 
`body {
  cursor: url(
    document.addEventListener('mousemove', function (event) {
      const point = document.querySelector('.point');
      point.style.left = event.clientX + 'px';
      point.style.top = event.clientY + 'px';
    }));
}`
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.