seo Question posted in
Some basic information to get you started with this can be found here.

image switch with pure javascript – SEO

so i’m trying to do a mouseover with just javascript so that the image doesn’t really show up for seo i set it up in html first to get the css right and am making everything appear with document.write so it can be generated with javascript (my js knowledge is way limited). so with html i am making things with

<img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src='img/brokenarrowwear-google-circle.png';" onmouseout="this.src='img/brokenarrowwear-googleplus.png';"/>

but since it uses “” and ” it doesn’t really work. I tried doing it as

document.write(' <img src="img/brokenarrowwear-googleplus.png" onmouseover="this.src=' + 'img/brokenarrowwear-google-circle.png' + ';" onmouseout="this.src=' + 'img/brokenarrowwear-googleplus.png' + ';"/> ')

but that didn’t really work either. does anyone know how i can do pure javascript? I found 

$("img.image-1").mouseenter(function () {
    $(this).replaceWith($('<img src="~/Content/images/prosecutor_tile_b.jpg">'));
});

but I don’t think it will work.

Tags:

3

Answers


  1. 0

    Simple inline pure Javascript solution:

    <script>
           document.write("<img src="http://placehold.it/150x150?text=image1"   onmouseover="this.src='http://placehold.it/150x150?text=image2'"  onmouseout="this.src='http://placehold.it/150x150?text=image1'" />");     
</script>

    The text says “image1” and on mouseover the text in the image will say “image2”

    Login or Signup to reply.
  2. 0

    Maybe this can help:

    <img id="mypic" src="img/brokenarrowwear-googleplus.png"  onmouseover='pictureChange(true)' onmouseout='pictureChange(false)'>

    The function pictureChange:

    function pictureChange(change){
    If(change==true){
        document.getElementById("mypic").src="img/brokenarrowwear-googleplus.png";
    }else{
    document.getElementById("mypic").src="img/brokenarrowwear-google-circle.png";
    }
}
    Login or Signup to reply.
  3. 0

    The problem is not the script. I see it in the script source, but I’m not seeing it in the rendered html, actually the whole img tag is missing. Meaning You have some type of rendering issue or another script removed it.

    Let’s see if it’s related to the inline javascript and escaping with backslashes doesn’t work: remove the onmouseover and onmouseout attributes from the google img, give it an id=”googlelogo” and add the following script at the end of your body:

    <script>
document.getElementById("googlelogo").onmouseover = function() {
    this.src = "img/brokenarrowwear-google-circle.png";
  }
document.getElementById("googlelogo") .onmouseout = function() {
    this.src = "img/brokenarrowwear-googleplus.png";
  }
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search