0

I am not experienced with coding at all. I just copy/paste template examples that I find on the internet and that has worked fine so far. However, there is a new problem that I am unable to solve.

The short question is, how can I set the css class of an image outside the <"img">? For example, this is the code that I have, and does not work:

$class_key= "top".(string)$count;
$returnarray[$level_key]='<img class=$class_key src=http://somepic.jpg  width=100px height=100px/>';

If you want more details, I explain below:

I am layering images, and the position of the top images is randomly determined. I am using a css code to name and define the layers:

<style type="text/css">
.bottom
 {position:absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
 }
 .top1
 {
  position:absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
 }
.top2
 {
  position:absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
 }

And the variable $count is randomly determined. If I explicitly write class="top1" or class="top2", the code works.

Please help me. Thanks

John
  • 3
  • 1
  • Is there an upper limit to the likely value of `$count`? Or could it go arbitrarily high? More broadly, what larger goal are you trying to achieve? And how does concatenating the count # to the `top` string help you achieve that? – Richie Thomas Jul 20 '18 at 02:07
  • Yes, $count is limited. Let's say I want a green background image, and on top of it a random (randomization is in php) image appears. With probability 1/2 the image is a red ball on the left side; and with probability 1/2 the image is a yellow ball on the right side. Moreover, this is repeated 10 times, and I need to keep track of the 10 outcome images. – John Jul 20 '18 at 02:35

1 Answers1

0

Assuming that you are using PHP...

You are using single quotes on $returnarray[$level_key]='<img class=$class_key.../>'; then $class_key is not interpreted.

You can use the following: Single quotes concatenating the variable:

`$returnarray[$level_key]='<img class="' . $class_key . '".../>';`

or double quotes

`$returnarray[$level_key]="<img class=\"{$class_key}\".../>";`

or another way using double quotes

`$returnarray[$level_key]="<img class=\"$class_key\".../>";`

See similar: PHP: Using a variable inside a double quotes

To better manage your CSS:

Add a generic class to your $class_key

$class_key= "img-top top".(string)$count;

Then the CSS rules will work for any image that contains img-top class:

.img-top{
  position:absolute;
  top: 100px;
  left: 100px;
  z-index: 2;
 }

Also you can wrap your loop content inside a div

<div class="img-top">
   [loop logic]
</div>

And define the CSS for all images inside it:

.img-top img{
   position:absolute;
   top: 100px;
   left: 100px;
   z-index: 2;
}
caiovisk
  • 3,667
  • 1
  • 12
  • 18
  • Thank you. But what if the top1 and top2 have different characteristics? For example the position of top2 could be left: 150px; – John Jul 20 '18 at 01:47
  • Then you can set `.img-top.top2 { left: 150px; }`. or if you following the second example which the class is set outside the img you can set `.img-top img.top2 { left: 150px; }`... – caiovisk Jul 20 '18 at 01:51
  • I am sorry, it didn't work. I guess my question is a lot more basic than what you think. Why does after writing class=$class_key, class stays as "$class_key" and does not take the assigned value " "top".(string)$count " ? – John Jul 20 '18 at 03:12
  • Here we go, a different question. See my updated answer. – caiovisk Jul 20 '18 at 03:30