Question

我有一个用javascript生成的图像文件的名称，并以HTML格式传递给图像的src - 这当前有效。

我想传递另一个图像文件作为图像的onmouseover属性。（因为我的文件名是动态生成的，所以我不能在css中使用hover）。

var para = document.createElement("P");
var total = document.createTextNode(parseFloat((subT + tax).toFixed(2))) ;

para.appendChild(total);

var existingText=document.getElementById("total_id").querySelector('p');
if(existingText){
    document.getElementById("total_id").replaceChild(existingText, para);
}
else{
    document.getElementById("total_id").appendChild(para);
}

所以我想从生成的文件名中添加另一个变量：

        var new_source_for_image = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + ".png";
    });
});
</script>
{/literal}

<div id="visit_daynight">
    <div class="change_visit">
        <a href="#"><img id="visit_image" src="" width="350" height="350"></a>
    </div>
</div>

和

var new_source_for_image_with_glow = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + "_glow" + ".png";

但我不知道如何在this.src属性中传递我的新变量。

有人有什么想法吗？

非常感谢！

Answer 1

我相信这就是你要找的东西。没有jQuery只需要普通的旧JavaScript。

keep_going = ""
while keep_going == "":

    sum_table = []
    count = 0
    unit_type = ""

    print("Welcome to the price comparison tool!")
    print()
    how_much = num_check("How much money do you have to spend? $", float, 1, 100)

    get_prod = True
    while get_prod:

        if count < 1:
            p_name = len_check("What is the name of the first product? ")
        elif 0 < count:
            p_name = len_check("Please enter another product, or type XXX to bring up summary ")
            if p_name.lower() == "xxx":
                break

        unit = num_check("Is the product in g/ml or kg/L? (enter 1 for g/ml or 2 for kg/l) ", int, 1, 2)
        if unit == 1:
            unit_type = "grams/millilitres"
        elif unit == 2:
            unit_type = "kilograms/litres"

        p_mass = num_check("What is the mass of '{}' in {}? " .format(p_name, unit_type), float, 1, 1000)
        if unit == 2:
            p_mass = p_mass*1000
        p_price = num_check("What is the price of '{}' in dollars? $" .format(p_name), float, 0.1, 100)
        p_average = p_price/(p_mass/1000)

        row = [p_name, p_mass, p_price, p_average]
        sum_table.append(row)
        count += 1

    for i in sum_table:
        if i[2] > how_much:
            sum_table.remove(i)

    print()
    print("--- Product Summary ---")
    print("All items over-budget have been removed! ")
    print("Name\tMass in g/ml\tPrice\tUnit price per kg")
    for i in sum_table:
        print(i)

    print()
    keep_going = input("Press <enter> to go again or any other key to quit")
    print()

以下是它的一个小提琴：https://jsfiddle.net/dkbewvay/

希望这有帮助。

Answer 2

这将有效：

 <script>
        var new_source_for_image_with_glow = "testA.png";

        var anotherSrc = "testB.png";


        function onmouseoverFunc(element) {
            element.src = new_source_for_image_with_glow;
        }

        function onmouseoutFunc(element) {
            element.src = anotherSrc;
        }
    </script>


<a href="#">
    <img id="visit_image" src="new_source_for_image_with_glow" width="350" height="350"
         onmouseover="onmouseoverFunc(this)"
         onmouseout="onmouseoutFunc(this)">
</a>

Answer 3

如果您可以动态设置cvt(26) ...我想您也可以为“备用来源”设置数据属性？！？

src

// Simulating your dynamic file source for the image.
$("#visit_image").attr("src", "http://lorempixel.com/400/200/sports");

// The same way, you could set an "alternate source"...
$("#visit_image").data("altSrc", "http://lorempixel.com/400/200/animals");


// The mouse events handler
$("#visit_image").on("mouseenter mouseleave", function(){
  var src = $(this).attr("src");
  var altSrc = $(this).data("altSrc");
  
  // Interchange the urls
  $(this).attr("src", altSrc).data("altSrc", src);
});

此演示在“体育”和“动物”之间互换URL。

Answer 4

使用这些事件处理程序的更好方法onmouseover＆amp; onmouseout将为他们提供脚本中定义的各自功能。您还需要将图像正确分配给img元素（ev.srcElement）看看：

<script>
MouseOverHandler = function(ev){ 
    ev.srcElement.src = new_source_for_image
    console.log('should change',ev);
}

MouseOutHandler = function(ev){ 
    ev.srcElement.src = old_source_for_image
    console.log('should change',ev);
}
</script>

<a href="#"><img id="visit_image" src="" width="350" height="350" 
             onmouseover="MouseOverHandler(this)"
             onmouseout="MouseOutHandler(this)"></a>

Answer 5

使用mouseover()和mouseout()以及attr()方法使用jQuery。

$(document).ready(function(){
  var file_name='your_file_name';
  var new_source_for_image ="/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + ".png";
  var new_source_for_image_with_glow = "/prestashop_1.7.0.3/modules/se_daynight/img/" + file_name + "_glow" + ".png";

  $("img#visit_image").attr('src',new_source_for_image);
  $("img#visit_image").mouseover(function(){
    $(this).attr('src',new_source_for_image_with_glow);
  });

  $("img#visit_image").mouseout(function(){
    $(this).attr('src',new_source_for_image);
  });
});

将变量传递给this.src

5 个答案: