Наведите указатель мыши на изображение Alpha Array

Question

Мне нужен ряд ссылок, где каждый находится в коробке с параллелограммом. Я использую Divs, кстати. Мне нужно, чтобы каждая коробка была попеременно черной/белой. Я хочу, чтобы каждая коробка имела уникальный цвет.

<div id="bar2"> 
    <ol> 
     <script type="text/javascript"> 
      for (var i = 0; i < 5; i++) 
      { 
       document.write("<a href='"); 
       document.write(chapLink[i]); 
       document.write("'><li id='li" + i + "' style='background-color:" + chapCol1[i] + "; color:" + chapCol2[i] + "'>"); 
       document.write(chapter[i]); 
       document.write("</li></a>"); 

       document.write("<img src='paragram"); 
       document.write(i+1); 
       document.write(".png'>"); 
      }; 
     </script> 
    </ol> 



var chapCol1 = new Array(); 
chapCol1[0] = 'white'; 
chapCol1[1] = 'black'; 
chapCol1[2] = 'white'; 
chapCol1[3] = 'black'; 
chapCol1[4] = 'white'; 

Массив работает для заполнения большинства каждой формы, но, что неудивительно, не охватывает его полностью. Это привело меня к предположению, что мне нужно будет использовать последовательность изображений, по одному для каждой комбинации цветов, возникающих в результате зависания.

Заранее спасибо - надеюсь, что мой вопрос ясен, Гарри

Answer 1

Итак, позвольте мне попытаться ответить на него функции: Для коробки параллелограмма формы: Если я понимаю, это хорошо, вы хотите чередованием блоки черного и белого цвета, и вы хотите, чтобы цвет текста внутри этих блоков был уникальным. Я не понимаю, почему вы пытаетесь вставить изображение после закрытия <li>. Наверное, вы пытаетесь вставить форму параллелограмма в блок, верно? Если вы хотите, чтобы ваш <li> был сформирован в соответствии с вашим изображением PNG, я бы предложил вам использовать его в качестве обратного изображения вашего блока, а не просто вставлять его позже. Для этого просто напишите background-image: your_path/your_image.png; внутри вашего атрибута стиля блока. Возможно, вам потребуется отрегулировать размер блока, поскольку изображение может быть «вырезано». Для настройки размера выполните следующие действия: если, например, предположим, что ваше изображение имеет ширину 10 пикселей и высоту 20 пикселей, и вы хотите, чтобы ваш блок имел тот же размер, что и ваше изображение. Просто напишите следующее по атрибуту стиля вашего блока: width:10px;height:20px; Но в любом случае, я все еще думаю, что я не совсем понял, что вы хотите сделать. О вашем последнем комментарии о том, что вы не можете заполнить всю форму: это, вероятно, потому, что тег li имеет значение по умолчанию margin, а background-color не влияет на маржу.

Для цвета парения, просто добавьте следующее к диве: onmouseover='this.style.color="unique_color_here";' onmouseout='this.style.color="standard_color_here";'

Надеется, что это помогает. Если бы вы могли лучше объяснить, что вы хотите, то это будет здорово: D Попытайтесь объяснить, какие именно изображения у вас есть, и что вы хотите с ними делать.