background-image ophalen vanaf andere locatie
Ik heb 3 menu's met elk 3 submenu's. Elk submenu heeft zijn eigen afbeelding. Wat ik wil is dat elk submenu zijn afbeelding ophaald vanuit een andere locatie.
De theorie is is dat 'background-image' kijkt welke categorie wordt aangeroepen en dan de bijbehoorende afbeelding ophaalt.
Na veel trial/error ben ik niet verder gekomen. Ik hoop dat jullie mij de juiste richting op kunnen duwen.
Wat ik heb ziet er zo uit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
{if $aProductCategorySubCategories|@count > 0}
<style type="text/css">
.customlayout-subcategory-container {
width:100%;
padding:10px;
}
.customlayout-subcategory-item {
float:left;
display:block;
background-image: url(<?php echo $ProductCategorySubCategory;?>);
padding:5px;
margin-right:10px;
margin-bottom:10px;
border:1px solid #ccc;
width: 260px;
height: 185px;
text-decoration:none;}
.customlayout-subcategory-item:hover {
background:#f1c40f;
}
</style>
<div class="customlayout-subcategory-container">
{section loop=$aProductCategorySubCategories name=i}
{$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
<a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item">
{$oProductCategorySubCategory->Name}
</a>
{/section}
</div>
{/if}
<style type="text/css">
.customlayout-subcategory-container {
width:100%;
padding:10px;
}
.customlayout-subcategory-item {
float:left;
display:block;
background-image: url(<?php echo $ProductCategorySubCategory;?>);
padding:5px;
margin-right:10px;
margin-bottom:10px;
border:1px solid #ccc;
width: 260px;
height: 185px;
text-decoration:none;}
.customlayout-subcategory-item:hover {
background:#f1c40f;
}
</style>
<div class="customlayout-subcategory-container">
{section loop=$aProductCategorySubCategories name=i}
{$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
<a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item">
{$oProductCategorySubCategory->Name}
</a>
{/section}
</div>
{/if}
De code resulteert in:
- Aar -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 10/10/2015 17:38:46 door - Ariën -
Zelfs ná het element wat gestyled moet worden, kan je dit later toevoegen.
Om Raplh beter te helpen:
- maak voor elke categorie een class aan:
Code (php)
1
2
3
2
3
.background-for-category--voertuigen { background-image: url('img/voertuig.jpg');
.background-for-category--vaartuigen { background-image: url('img/vaartuig.jpg');
.background-for-category--vliegtuigen { background-image: url('img/vliegtuig.jpg');
.background-for-category--vaartuigen { background-image: url('img/vaartuig.jpg');
.background-for-category--vliegtuigen { background-image: url('img/vliegtuig.jpg');
En uiteraard voeg je gewoon deze class toe:
(= regel 33 van code hierboven)
Code (php)
1
2
2
<a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
{$oProductCategorySubCategory->Name}</a>
{$oProductCategorySubCategory->Name}</a>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
.background-for-category--lijsta { background-image: url('images/pictogramlijst1.jpg')};
.background-for-category--lijstb { background-image: url('images/pictogramlijst2.jpg')};
.background-for-category--lijstc { background-image: url('images/pictogramlijst3.jpg')};
.customlayout-subcategory-container {
width:100%;
padding:10px;
}
.customlayout-subcategory-item {
float:left;
display:block;
padding:5px;
margin-right:10px;
margin-bottom:10px;
border:1px solid #ccc;
width: 260px;
height: 185px;
}
</style>
.background-for-category--lijsta { background-image: url('images/pictogramlijst1.jpg')};
.background-for-category--lijstb { background-image: url('images/pictogramlijst2.jpg')};
.background-for-category--lijstc { background-image: url('images/pictogramlijst3.jpg')};
.customlayout-subcategory-container {
width:100%;
padding:10px;
}
.customlayout-subcategory-item {
float:left;
display:block;
padding:5px;
margin-right:10px;
margin-bottom:10px;
border:1px solid #ccc;
width: 260px;
height: 185px;
}
</style>
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="customlayout-subcategory-container">
{section loop=$aProductCategorySubCategories name=i}
{$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
<a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
{$oProductCategorySubCategory->Name}</a>
{/section}
</div>
{section loop=$aProductCategorySubCategories name=i}
{$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
<a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
{$oProductCategorySubCategory->Name}</a>
{/section}
</div>
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<div class="customlayout-subcategory-container">
{section loop=$aProductCategorySubCategories name=i}
{$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
<a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
{$oProductCategorySubCategory->Name}</a>
{/section}
</div>
{section loop=$aProductCategorySubCategories name=i}
{$oProductCategorySubCategory = $aProductCategorySubCategories[i]}
<a href="{$oProductCategorySubCategory->Deeplink}" class="customlayout-subcategory-item background-for-category--{$oProductCategorySubCategory->Name}">
{$oProductCategorySubCategory->Name}</a>
{/section}
</div>
Dat is (denk ik) Smarty of een andere template-builder-ding.
Wat is de gegenereerde HTML, zoals bezoekers van je website hem gaan zien? Want daarop werkt CSS, niet op je Smarty-template...