javascript – How do I border an image by selecting a part of the title? – Education Career Blog

hope you can help me solving my problem.

These two images are linked somewhere on a site.

<a href="?FRUIT=banana><img height="40" src="../../banana.jpg?format=raw" title="Banana - yellow"></a>

<a href="?FRUIT=apple><img height="40" src="../../apple.jpg?format=raw" title="Apple - green"></a>

I want to border them to start writing a function.

As you can see the title of each image contains the fruit and a color which should be associated by hearing the fruit.

I started creating an array.

var colors = 'yellow','green';

Each element of the array should be bordered by 3px dotted green.

for(var i = 0;i < colors.length;i++){
.css('border','3px dotted green');

But how do I get the title of the image containing the color to border it with 3px dotted green?

Thank you in advance.


for(var i = 0;i < fruits.length;i++){
 $('imgtitle$='+fruitsi+'').css('border','3px dotted green');
 var title =  $('#'+fruitsi).attr('title');

this is how you can get the title and will border all the images which title end with any of the colors in fruits array.


for clarity it would probably be better to use an object to reference your colors by fruit name.

var fruit_colors = {Banana: "yellow", Apple: "red", Lime: "green", Grape: "purple"};
for(k in fruit_colors){
  $("imgtitle^=" + k).css("border","3px dotted " + fruit_colork)

Leave a Comment